With CSS3, many of the features that would have required lots of images to make can now be reproduced with just a few lines of code, greatly reducing the amount of data you need to send to the visitor. Of course, CSS3 isn’t yet implemented in all browsers, but the latest updates for those browsers will support it (for instance, IE7 doesn’t support CSS3 but IE9 does). However, if the user doesn’t have a browser that’ll support CSS3, no worries! With the use of a image background, they can also see the gradient, just through images instead. This’ll use a 24 bit PNG, so if you still care about supporting IE, you’ll need to get a PNG transparency hack. This button will be scaleable, supporting various different colours and sizes.

Right, so are you ready to learn how to make awesome buttons solely through CSS3? Good, let’s get started!

So, here’s the basic button style:
.button, .button:visited {
background: #222 url(overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer
This style will be applied to any button, regardless of size or colour. If you make a div now, it’ll look like this:

Now we need to start making some styles for different sizes. This is really easy to make, just set a font size and if needed, padding. I’d recommend making some presets, such as a small button or a large button. For instance, if I wanted a small button, I’d write the following code:
.small.button{font-size: 11px;}
.small.button:visited{font-size: 11px;}
And if you make the button larger, you might need to add some padding. For instance, for the large button, I had to include some to make it look right. Here’s the code:
.large.button{font-size: 14px; padding: 8px 14px 9px;}
.large.button:visited{font-size: 14px; padding: 8px 14px 9px;}

Div’s will now look like this:

Finally, a button colour. These are really easy to make, just define the background color as whatever you want. For maximum effect, you should also make a different, lighter or darker colour for the hover action, to clearly show to visitors where they are ‘hovering’. For instance, if I want to add a pink button, I’d write the following CSS style.
.pink.button:hover{background-color: #c01d7d;}

I’d advise you store this CSS code in a separate style sheet as it can get pretty big with all the buttons. If you also make a default button CSS style sheet, you can use it in lots of designs by simply copying the file. And when you see how good the buttons look, you’ll want to include this in almost all your designs.

Here’s what I made it look like after adding a few more colours.

If you want the code to the other colours, here’s the CSS style:
.blue.button{background-color: #206bdc;}
.blue.button:hover{background-color: #1d40c0;}

.green.button{background-color: #29dc20;}
.green.button:hover{background-color: #1dc044;}

To add your own colours, it’s really easy – just go into Photoshop and get a colour, then for the hover, just move the selector down a bit.


Enjoy blogging, love everything about Designs, and a WordPress Evangelist.

More Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

By submitting this form, you accept the Mollom privacy policy.