With the implementation of CSS3 in most modern browsers, using it in place of images for buttons is now an option. CSS3 buttons have the advantage of being easier for screen readers to process, as well as being lighter on your page load times. Also, editing them doesn’t require you go into Photoshop, instead you can just edit your source code! In this tutorial I’ll show you how to use CSS to style links to look like buttons, with minimal hassle.

The HTML

First off, we just add a class of Button to the link we want to turn into a button.

 <a class="button" href="”#”">BUY NOW</a>

Basic text styling

Now add some basic styling, using text-decoration, color, font-size and font-family.

 .button { text-decoration: none; color: white; font-size: 18px; font-family: arial, sans serif; }

Giving the button structure

Next we’re going to make the button look like a solid shape. We’ll do this by giving it a background-color, a border and some padding.

 padding: 11px 35px 11px 35px; border: 1px solid rgb(120,120,120); background: rgb(82,178,214);

Adding the CSS3

Now we get to the CSS3! First off we’ll start with text-shadow.

 text-shadow: 0px 1px 0px rgb(67,137,167);

This will give the text a one pixel shadow underneath it. Text-shadow is supported in later versions of Firefox, Google Chrome, Safari, Opera and IE9.

Next let’s add some rounded corners to the button using border-radius.

 Border-radius: 3px;

To make border-radius work in Firefox, we’ll need to use a browser prefix. This just means we use the same code, but with -moz- attached to the start (short for Mozilla).

 -moz-border-radius: 3px; Border-radius: 3px;

Finally add a background gradient. Gradients can actually be made to work in most browsers.

 /*For browers that don't support gradients*/ background: rgb(82,178,214);

For browsers that do support gradient:

 /*For Google Chrome and Safari*/ background: -webkit-gradient(linear, left top, left bottom, from(#72C0DE), to(#42ABD2));  /*For Firefox*/ background: -moz-linear-gradient(top, #72C0DE, #42ABD2);

Adding the Hover Effects

We will be adding some simple hover effects so people can tell when their cursor is actually over the button

 .button:hover {  border: 1px solid rgb(130,130,130);  /*For browers that don't support gradients*/ background: rgb(105,188,220);  /*For Google Chrome and Safari*/ background: -webkit-gradient(linear, left top, left bottom, from(#82C7E1), to(#5AB6D8));  /*For Firefox*/ background: -moz-linear-gradient(top, #82C7E1, #5AB6D8); }  .button:active { background: rgb(54,165,207);  /*For Google Chrome and Safari*/ background: -webkit-gradient(linear, left top, left bottom, from(#5AB6D8), to(#82C7E1));  /*For Firefox*/ background: -moz-linear-gradient(top, #5AB6D8, #82C7E1); }

Live Demo

You can view the live demo here. Will work best in a web-kit browser but should render decently in a non-webkit browser

Conclusion

I hope you enjoyed this tutorial by John Tidey, a new author to HV-Designs. You will be seeing more implementation of CSS3 and HTML5 tutorials on the site, so let’s see your response to this tutorial! Post your work on the tutorial in a comment and show some love to our new author.