CSS3 Buttons

In years gone by, the only way to create nice looking buttons was to use an image but these were difficult to maintain without image editing software. However, with CSS3 we can apply nice looking gradients and and rounded corners very easily for modern browsers that support them.

These buttons degrade gracefully for browsers that don’t support gradients and rounded corners but for those that do we can give users a nicer experience.

CSS3 Buttons Demo

CSS3 Buttons HTML

The HTML for these buttons is very simple and you can clearly see how easy these are to update with different text within the button.

<p class="cta-style-a"><a href="#">This is a button</a></p>

Buttons CSS

The CSS for the buttons is relatively simple. First we set a font size and font family for the paragraph.

.cta-style-a {
font-size: 13px;
font-family: helvetica, arial, sans-serif;
}

Next we target the anchor with the following. This applies a gradient using all the relevant browser prefixes and the border radius. We’re also include some text shadow, border, colour and a few other styles but you can play around with these as required.

.cta-style-a a {
display: inline-block;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
background-color: #64b414;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(#a1d749, #64b414); /* FF 3.6+ */
background-image: -ms-linear-gradient(#a1d749, #64b414); /* IE10 */
background-image: -webkit-linear-gradient(#a1d749, #64b414); /* Safari 5.1+, Chrome 10+ */
background-image: linear-gradient(#a1d749, #64b414); /* the standard */
text-decoration: none;
padding: 3px 12px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #91c34c;
}

I’ve also included display: inline-block; so that margin can be applied if required.

Finally, we apply the hover state for the button which simply applied a different coloured gradient and border colour:

.cta-style-a a:hover {
background-color: #808080;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(#505050, #808080); /* FF 3.6+ */
background-image: -ms-linear-gradient(#505050, #808080); /* IE10 */
background-image: -webkit-linear-gradient(#505050, #808080); /* Safari 5.1+, Chrome 10+ */
background-image: linear-gradient(#505050, #808080); /* the standard */
text-decoration: none;
border: 1px solid #333;
}

Summary

And that’s it. All aspects of the button are completely customisable so that you can change the font size, colour of the buttons, size etc without ever having to go into Photoshop.

I also use LESS along with Preboot.less so that the colours of buttons are even easier to change and update from project to project and will cover that in a future tutorial.