PHP round rectangular button with border

Vitaly Eremenko

All Scripts

vit_round_button.php
The button may have your sizes, background color, text label and text color, border thickness and radius of corners.
It may be used in php- or html-page, in your HTML-form.
- This button may have borders, but its borders do not support 3D inset/outset effects.
Color allocation for this effect with shadows must be set for each pixel on each round corner, that is very complex and slow for HTML-page.
- This button type must have PNG-type to support transparent white color in the corners.
It is more easy and effective to use image button for 3D effects in round buttons.
- Small defects in the corners probably produced by php-function "ImageArc(...)".

Example of the round button in the page:

HTML-Code:
< IMG SRC='vit_round_button.php?TEXT=Round+Button&W=200&H=80&R=16&THK=6&BTNRGB=009060&TEXTRGB=FFFF00' ALT='round button' NAME='my button' HSPACE=10 VSPACE=5 BORDER=0 >

This is PHP5 code to create rectangular button with rounded corners.
The button PHP-code:

< ?php
/*
**************************
Vitaly Eremenko
Round Rectangular Button for web-pages
2012-04-03; 2012-04-07;
www.violtan.com/webcode/
Parameters:
TEXT - text of label on the button (one string, use + between words.
    By default no label.
W - [px] - width of the button  (by default = 120)
H - [px] - Height of the button (by default = 40)
R - [px] - Radius of round corners [px] (default = 8)
THK - [px] - thickness of the border (by default = 2)
   Set THK=0 to remove borders and draw flat round rectangular color button.
BTNRGB - background color RGB (by default = 80B0D0)
TEXTRGB - label color RGB (by default = 80FFFF)
NOTES:
  Background and Text Color must have hexadecomal format RRGGBB <B>without</B> 0x or # prefix.

***************************
*/
header ("Content-type: image/png");
// Input Parameters:
$sText = "";
if (IsSet($_GET['TEXT']))
  $sText = $_GET['TEXT'];  // Button Label

$nW = 120;
if (IsSet($_GET['W']))
  $nW = $_GET['W'];      // width

$nH = 40;
if (IsSet($_GET['H']))
  $nH = $_GET['H'];      // height

$nRad = 8;
if (IsSet($_GET['R']))
  $nRad = $_GET['R'];

$nTHK = 2;
if (IsSet($_GET['THK']))
  $nTHK = $_GET['THK'];   // Thickness of Border

$sBtnBG = "4080B0";
if (IsSet($_GET['BTNRGB']))
  $sBtnBG = $_GET['BTNRGB'];   // Color of Button RGB

$sTextColor = "80FFFF";
if (IsSet($_GET['TEXTRGB']))
  $sTextColor = $_GET['TEXTRGB'];   // Color of Button RGB

// Create Button:
//$img = ImageCreate($nW+1, $nH+1);  // Palette Based (OLD)
$img = ImageCreateTrueColor($nW, $nH);  // ==> Black BG
if (! $img)
{
  die ("vit_img_button: Cannot create Graphics Stream.");
}

$sRed    = substr($sBtnBG, 0, 2);
$crBtnR  = intval("0x$sRed", 16);
$sGreen  = substr($sBtnBG, 2, 2);
$crBtnG  =  intval("0x$sGreen", 16);
$sBlue   = substr($sBtnBG, 4, 2);
$crBtnB  =  intval("0x$sBlue", 16);

$sRed    = substr($sTextColor, 0, 2);
$crRedTX = intval("0x$sRed", 16);
$sGreen  = substr($sTextColor, 2, 2);
$crGreenTX = intval("0x$sGreen", 16);
$sBlue = substr($sTextColor, 4, 2);
$crBlueTX = intval("0x$sBlue", 16);

$crBG     = ImageColorAllocateAlpha($img, 0xFF, 0xFF, 0xFF, 0); // 127 = transprent 100%
$crButton = ImageColorAllocate($img, $crBtnR, $crBtnG, $crBtnB);
ImageColorTransparent($img, $crBG);

$nW1 = $nW - 1;
$nH1 = $nH - 1;
$nR2 = max($nRad + $nRad - 1, 0);

ImageFill($img, 0, 0, $crBG);
ImageFilledRectangle($img, $nRad, 0, $nW-$nRad, $nH, $crButton);
ImageFilledRectangle($img, 0, $nRad, $nW, $nH-$nRad, $crButton);

//ImageFilledPolygon($img, $anButton, $nPoints, $crButton);
ImageFilledArc($img, $nRad, $nRad, $nR2, $nR2, -180.0, -90.0, $crButton, IMG_ARC_PIE);
ImageFilledArc($img, $nW-$nRad, $nRad, $nR2, $nR2, -90.0, 0.0, $crButton, IMG_ARC_PIE);
ImageFilledArc($img, $nW-$nRad, $nH-$nRad, $nR2, $nR2, 0.0, 90.0, $crButton, IMG_ARC_PIE);
ImageFilledArc($img, $nRad, $nH-$nRad, $nR2, $nR2, 90.0, 180.0, $crButton, IMG_ARC_PIE);

imagesetthickness($img, 1);
$ndCol = 32;
if ($nTHK > 2)
  $ndCol = intval(160 / $nTHK);

$nR2 = $nRad + $nRad;

for ($nb=0; $nb<$nTHK; $nb++)
{
  $crAddT = max(160 - $nb * $ndCol, 0);
  $crRedT1   = min($crBtnR + $crAddT, 255);
  $crGreenT1 = min($crBtnG + $crAddT, 255);
  $crBlueT1  = min($crBtnB + $crAddT, 255);
  $crBorder = ImageColorAllocate($img, $crRedT1, $crGreenT1, $crBlueT1); // External Border color
  $nL = max($nRad + $nb - 1, 0);
  $nT = $nRad + $nb;
  ImageArc($img, $nL, $nT, $nR2, $nR2, -180.0, -90.0, $crBorder);
  ImageArc($img, $nW1-$nL, $nT, $nR2, $nR2, -90.0, 0.0, $crBorder);
  ImageArc($img, $nW1-$nL, $nH-$nT, $nR2, $nR2, 0.0, 90.0, $crBorder);
  ImageArc($img, $nL, $nH-$nT, $nR2, $nR2, 90.0, 180.0, $crBorder);

ImageLine($img, $nL, $nb, $nW1-$nL, $nb, $crBorder);
  ImageLine($img, $nW1-$nb, $nT, $nW1-$nb, $nH1-$nT, $crBorder);
  ImageLine($img, $nL, $nH1-$nb, $nW1-$nL, $nH1-$nb, $crBorder);
  ImageLine($img, $nb, $nT, $nb, $nH1-$nT, $crBorder);

imagecolordeallocate($img, $crBorder);
}

$nFont = 5;
$nFontW = imagefontwidth($nFont);
$nFontH = imagefontheight($nFont);
$nChars = strlen($sText);
$nWtext = $nFontW * $nChars;

$nX0 = ($nW - $nWtext) / 2;
$nY0 = ($nH - $nFontH) / 2;
$crText    = ImageColorAllocate($img, $crRedTX, $crGreenTX, $crBlueTX);
$crRedTB   = 0; // max($crRedTX - 128, 0);
$crGreenTB = 0; // max($crGreenTX -128, 0);
$crBlueTB  = 0; // max($crBlueTX -128, 0);
$crTextBG  = ImageColorAllocate($img, $crRedTB, $crGreenTB, $crBlueTB);

if ($nTHK > 1 && $nChars > 0)
{  // use it for shadow under text label
//  ImageString($img, $nFont, $nX0+2, $nY0+2, $sText, $crTextBG);
}

if ($nChars > 0)
  ImageString($img, $nFont, $nX0, $nY0, $sText, $crText);

// Output Button:
ImagePng($img);
imagedestroy($img);
//***********************************
? >

Home Page	Art-Shop	Colors Rev.	Art-Gallery
Articles	FAQ	MAP	Miscellanea