[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 455
  • Last Modified:

Need to create button similar to existing format

On an existing website I have several buttons which are as follows:

Submit
Log in
How can I create new buttons with different text using this same look?
0
canuckconsulting
Asked:
canuckconsulting
  • 6
  • 5
  • 3
2 Solutions
 
billfusionCommented:
If these buttons specity inline style, then use that style.  Otherwise, and more likely, they use a style from either a CSS file or on the page itself.  In that case you can use that same style reference on you new buttons.

Here is an example with inline style:
<input type="button" name="btn_Test" value="Test" style="background-color:#66CCFF; color:white; border:2px solid silver; padding-left:20px; padding-right:20px" />

Open in new window

0
 
canuckconsultingAuthor Commented:
Sorry, I should have been clearer.  These buttons are images.  They are actually PNG files which I have inherited. I'm unfamiliar with how to manipulate the source images and change the text and size of the buttons.  Also matching the font is going to be a pain.

I had hoped this was a common problem others had faced.
0
 
Robert SchuttSoftware EngineerCommented:
Taking the code from this site: http://fiddyp.co.uk/write-text-to-a-png-with-php/ and the background from one of your images I have made a page where you can create your own new button images:
http://schutt.nl/ee/Q_27827001/button.php?text=abcdef

I'm working on the font...
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
billfusionCommented:
Is the text on the buttons part of the image?  Can you post a sample on a website I can take a look at?
0
 
Robert SchuttSoftware EngineerCommented:
Yes, the php code draws the text in the image and shows it, you can save the image to use on your website.

Here is a second version using the Verdana 8 font which seems close to what is used originally: http://schutt.nl/ee/Q_27827001/button2.php?text=Login 

If you have access to a php server you can use this modified code (also copy the verdana.ttf file):
<?php // code from: http://fiddyp.co.uk/write-text-to-a-png-with-php/
$im = imagecreatefrompng("btn-bg.png");
if(!$im) {
	die("");
}
$white = imagecolorallocate($im, 255, 255, 255);
$width = imagesx($im);
$height = imagesy($im);
$font = './verdana.ttf';
$fontsize = 8;
$text = $_GET['text'];
$angle = 0;
$bbox = imagettfbbox($fontsize, $angle, $font, $text);
$x = $bbox[0] + ($width - $bbox[4]) / 2;
$y = $bbox[1] + ($height - $bbox[5]) / 2 - 5;
imagettftext($im, $fontsize, $angle, $x, $y, $white, $font, $text);
Header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>

Open in new window

0
 
Robert SchuttSoftware EngineerCommented:
Here is a page with some different versions: http://schutt.nl/ee/Q_27827001/compare.htm
0
 
Robert SchuttSoftware EngineerCommented:
Also made a compare2.htm with submit button added, must admit that the css styled button like @billfusion suggested look the best (and are buttons ;-), even when zooming in.

There's a problem with the generated images in that the baseline is not constant, I tried different calculations I found in the PHP manual but they each seem to have their shortcomings. Thinking now if you really want the images it would be easier to do in MS Paint (unless you need like a 100). Normally of course I would say Photoshop but you're not asking for wild shiny effects and such.
0
 
billfusionCommented:
Looks like you did a good job in those examples.  

Another problem with the image generated buttons is that are fixed in size and do not adjust to the text.  For example http://schutt.nl/ee/Q_27827001/button2.php?text=testing Button.  Also it is adding unnecessary load on the server that has to process these images when they may not need to be dynamic.

If you do decide to use css, I would suggest removing the style from the element and use css classes to specify the syle.  That will give you more consistancy across the site.
0
 
billfusionCommented:
Here is another version that uses an image but can handle text up to 200px wide by using sprites.  Make sure to save the html and image in he same folder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
.clear { /* generic container (i.e. div) for floating buttons */
     overflow: hidden;
     width: 100%;
 }

 a.button {
     background: transparent url('blueBG.png') no-repeat scroll top right;
     color: #ffffff;
     display: block;
     float: left;
     font: normal 12px arial, sans-serif;
     height: 24px;
     margin-right: 6px;
     padding-right: 18px; /* sliding doors padding */
     text-decoration: none;
 }

 a.button span {
     background: transparent url('blueBG.png') no-repeat;
     display: block;
     line-height: 14px;
     padding: 5px 0 5px 18px;
 } 
 </style>


</head>

<body>

<form name="testForm" method="post">
	<a class="button" href="#" onclick="submit()"><span>Bring world peace and more</span></a><br /><br />
	<a class="button" href="#" onclick="submit()"><span>Or Not</span></a><br />

    
</form>



</body>
</html>

Open in new window

blueBG.png
0
 
Robert SchuttSoftware EngineerCommented:
I did say "you can save the image to use on your website" so I didn't mean for this to be used dynamically although with the right caching mechanisms in place it's not a problem.

I like the idea of the variable width, but maybe the site design calls for fixed width buttons?

Well, it's all academic if we don't hear back from the OP.

EDIT: that last line doesn't 'sound' right, I just meant we need your input, you have a lot of questions open at the moment.
0
 
billfusionCommented:
@robert_schutt, right on on all points in your last post.
0
 
canuckconsultingAuthor Commented:
Hi guys and thank you so much for your efforts!

There is no requirement for fixed widths and in fact i prefer buttons sized appropriately.

@robert_schutt, how did you determine the correct colour and font to use for the CSS?
0
 
Robert SchuttSoftware EngineerCommented:
I determined it just by guessing (and trial and error) and it's not exactly right it seems, there are a few fonts that are similar on my computer and there are more fonts I know with certain programs like Photoshop, also more ways to choose how to 'print' them.

I made a new page where you can set options and the buttons are variable width: http://schutt.nl/ee/Q_27827001/ 

For reference, here is the php code I used:
<?php // code originally from: http://fiddyp.co.uk/write-text-to-a-png-with-php/
$im = imagecreatefrompng("btn-login.png");
imagealphablending($im, true);
imagesavealpha($im, true);
if(!$im) {
	die("");
}
$width = imagesx($im);
$height = imagesy($im);
$bluebg = imagecolorallocate($im, 0, 150, 215); // 0x00, 0x96, 0xd7
imagefilledrectangle($im, 5, 5 , $width-7, $height-7, $bluebg);
if (isset($_GET['font'])) $font='./'.$_GET['font'].'.ttf'; else $font = './verdana.ttf';
if (isset($_GET['fontsize'])) $fontsize=$_GET['fontsize']; else $fontsize = 8;
if (isset($_GET['text'])) $text = $_GET['text']; else $text = 'abc';
if (isset($_GET['angle'])) $angle = $_GET['angle']; else $angle = 0;
if (isset($_GET['aa'])) $aa = $_GET['aa']; else $aa = 1;
$bbox = imagettfbbox($fontsize, $angle, $font, $text);
$newwidth = $bbox[2]-$bbox[0]+20; // margin
if ($newwidth > $width) {
	$im_dest = imagecreatetruecolor($newwidth, $height);
	// first copy the left and right parts that should not be resized
	$keepleft=3;
	imagecopy($im_dest, $im , 0, 0, 0, 0, $keepleft, $height);
	$keepright=4;
	imagecopy($im_dest, $im , $newwidth-$keepright, 0, $width-$keepright, 0, $keepright, $height);
	// then stretch the middle part
	imagecopyresampled($im_dest, $im, $keepleft, 0, $keepleft, 0, $newwidth-$keepleft-$keepright, $height, $width-$keepleft-$keepright, $height);
	imagedestroy($im);
	$im = $im_dest;
	$width = $newwidth;
}
$white = imagecolorallocate($im, 255, 255, 255);
imagettftext($im, $fontsize, $angle, ($width-($bbox[2]-$bbox[0]))/2-1, ($height-($bbox[3]-$bbox[1]))/2+3, $aa*$white, $font, $text);
Header('Content-type: image/png');
imagepng($im);
imagedestroy($im);
?>

Open in new window

0
 
canuckconsultingAuthor Commented:
Thank you for the help!  I have a much better understanding of my options. In the end I followed the CSS.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now