How to Create CSS3 Gradient Buttons (Tutorial)

In this quick tutorial we’ll create a set of CSS3 gradient buttons that are cross-browser compatible and come in 3 sizes: big, medium, small. The buttons will have 3 states, normal, hover and active and for each of them we’ll be using some great css3 effects like gradients, box shadow and text shadow.

We encourage you to start using the CSS3 techniques because are faster and simple and avoid as much as possible the sprite image styles for web elements. Let get started with the tutorial.

You may also like the following tutorial articles:

• CSS3 Pricing Table UI Element
• Free jQuery Photo Gallery
• Create a Ribbon DropDown Menu with CSS3 and jQuery

HTML CODE

We’ll create 3 anchor tags for each size button: big, medium, small. That’s it for the markup code.

<a href="#" class="big red">Read More</a>
<a href="#" class="medium red">Read More</a>
<a href="#" class="small red">Read More</a>

CSS3 CODE

First we’ll create the common styles for all button sizes. We’ll add here the border-radius and box-shadow properties. We used the Oswald font-family, but you can replace it with whatever you like from the Google Fonts Library.

.big, .medium, .small{display: block;
text-align: center;
font-family: 'Oswald',sans-serif;
text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);
color: #ffffff;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

Now we’ll add the size for each of the css3 buttons and modify the box-shadow property for the active state.

.big{width: 130px;height: 30px;padding: 17px 10px 10px 10px;font-size:24px;}
.medium{width: 80px;height: 25px;padding: 10px 10px 5px 10px;font-size:18px;}
.small{width: 60px;height: 20px;padding:5px;font-size:12px;}
.big:active, .medium:active, .small:active{box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);outline: 0 none;}

The final step is to add the css3 background gradients to each button style. You’ll notice that we used different prefixes for each browser because this property isn’t standardized. You are free to change the gradient colors with whatever colors you like.

.red{border:1px solid #622929;
background: #D55857;
background: -webkit-gradient(linear, left top, left bottom, from(#D55857), to(#BD4544));
background: -moz-linear-gradient(top, #D55857,  #BD4544);
background: linear-gradient(#D55857, #BD4544);
}

.red:hover, .red:active{
text-decoration:none;
border-color: #af4949;
background: #ed7574;
background: -webkit-gradient(linear, left top, left bottom, from(#ed7574), to(#D55857));
background: -moz-linear-gradient(top, #ed7574,  #D55857);
background: linear-gradient(#ed7574, #D55857);}

CONCLUSION

Thank you for reading this tutorial and we hope that you find it useful. Download the archive and play with the CSS3 button styles. Stay tuned for more tutorials and freebies.