Smarter Web Design with CSS Buttons
Up until about six months ago, I always preferred to make all of my buttons in Photoshop. (You'll notice this on mcmelectronics.com)I was able to get them to look exactly how I wanted them to; no variations in size or of the font.
Recently, with a little inspiration, I decided to go ahead and take a stab at recreating the buttons that we use on our main site. Once complete, this will mean that I don't have to create 50+ buttons for each site we do, and our front end guys don't have to wait for me to build new buttons when needed, they will have the styles needed at hand. Sure, it wont be identical to the PS version, but it will be close.
Here is a sample button from a step in the checkout process.
So, the first thing I did was to go to my original .psd and created images to use for the left and right sides of my button, similarly to the tutorials over at dynamicdrive.com.
Tips: Make sure to make the right side of your image long enough to cover any phrase that will be used (and then some). Save them as gifs with transparent backgrounds, or pngs so that they can be used on any background.
Now that we have the images ready and saved, lets start in on the CSS.
/***********************************************************
Author: Christian Moist, May 21, 2008
Bits For Regular Buttons
***********************************************************/
a.grnbutton{
background: transparent url('roundedge-grn-left.gif')
no-repeat top left;
display: block;
float: left;
font: 900 11px Arial;
line-height: 14px;
height: 20px;
padding-left: 6px;
text-decoration: none;
color: #FFFFFF;
text-transform: uppercase;
}
a.grnbutton span{
background: transparent url('roundedge-grn-right.gif')
no-repeat top right;
display: block;
padding: 3px 8px 3px 3px;
color: #FFFFFF;
}
Now to create the HTML. Essentially we are going to create a regular link and give it a class of 'grnbutton', but by looking at the code above, this will only give you the left half of the image we created earlier. To bring in the right half, we need to add <span> tags around the content of the word.
In all the HTML should look something like this.
<a href="#" class="grnbutton"><span>Continue</span></a>
Notice it doesn't matter if the word 'continue' is uppercase, lowercase, or a combination of the two because we have 'text-transform: uppercase;' in the CSS above.
If we try this out in a browser, we will get:
Continue
There you have it. This has been tested in IE7 and FF, and should work in other major browsers without a problem. Next, I'll talk about creating input buttons to match.
Labels: CSS, Web Development