Using CSS3 Gradient Buttons

Okay, so Brian Gardner shared something pretty cool on his blog the other day and I wanted to be sure to share it here as well because I always like referring back to cool tricks like this from time to time on client projects.

Occasionally there are times when you might want to add a button to a page or post as opposed to a text link to draw attention to the call to action for your readers. Here’s what Brian shared, it has a few steps so I will list these along as I go. This example is making buttons for social networks but the same idea can work for any number of things.

The first thing you will want to do is to add this to your stylesheet:

/* Gradient Social Media Buttons
------------------------------------------------------------ */

a.button-dribbble,
a.button-facebook,
a.button-googleplus,
a.button-linkedin,
a.button-pinterest,
a.button-rss,
a.button-tumblr,
a.button-twitter {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 1px 1px #999;
color: #fff;
display: inline-block;
font-size: 16px;
margin: 0 20px 20px 0;
padding: 10px 15px;
text-align: center;
width: 130px;
}

Next, you will want to add the CSS for each of your buttons listed above. This is an example of what the CSS would look like for the a.button-dribble:

a.button-dribbble {
background-color: #c93764; /* fallback color */
background: -moz-linear-gradient(top, #ea4c89, #c93764);
background: -ms-linear-gradient(top, #ea4c89, #c93764);
background: -webkit-linear-gradient(top, #ea4c89, #c93764);
border: 1px solid #c93764;
text-shadow: 0 -1px -1px #9d2849;
}

a.button-dribbble:hover {
background: -moz-linear-gradient(top, #c93764, #ea4c89);
background: -ms-linear-gradient(top, #c93764, #ea4c89);
background: -webkit-linear-gradient(top, #c93764, #ea4c89);
}

Once you have all the buttons defined in your CSS then you can add them wherever you would like on your site by entering in the following code:

<a class="button-dribbble" href="#">Follow me on Dribbble</a>

Once you have completed all of the steps above and inserted the html code into your page / post, your end result should look like this:

Checkout StudioPress