How to Create Social Media Buttons With CSS3 Gradients

A few months ago I wrote about how to add color buttons to your Genesis-powered website. I’d like to teach you how to create social media buttons using CSS3 gradients.

Below are the buttons that are included in this tutorial:

Dribbble Facebook Google LinkedIn Pinterest RSS Tumblr Twitter

You might be asking yourself where you can use something like the social media buttons. You might implement these in the top right section of your header or in your sidebar.

Creating the Social Media Buttons

In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s some sample HTML, along with the CSS required for the colored content boxes.

/* Global Styles ------------------------------------------------------------ */ a.button-dribbble, a.button-facebook, a.button-googleplus, a.button-linkedin, a.button-pinterest, a.button-rss, a.button-tumblr, a.button-twitter { border-radius: 3px; box-shadow: 0 1px 1px #999; color: #fff; display: inline-block; font-size: 16px; margin: 0 24px 24px 0; padding: 12px 16px; text-align: center; width: 150px; }

/* Dribbble ------------------------------------------------------------ */ 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); }

/* Facebook ------------------------------------------------------------ */ a.button-facebook { background-color: #2b4170; /* fallback color */ background: -moz-linear-gradient(top, #3b5998, #2b4170); background: -ms-linear-gradient(top, #3b5998, #2b4170); background: -webkit-linear-gradient(top, #3b5998, #2b4170); border: 1px solid #2b4170; text-shadow: 0 -1px -1px #1f2f52; } a.button-facebook:hover { background: -moz-linear-gradient(top, #2b4170, #3b5998); background: -ms-linear-gradient(top, #2b4170, #3b5998); background: -webkit-linear-gradient(top, #2b4170, #3b5998); }

/* Google+ ------------------------------------------------------------ */ a.button-googleplus { background-color: #c33219; /* fallback color */ background: -moz-linear-gradient(top, #e64522, #c33219); background: -ms-linear-gradient(top, #e64522, #c33219); background: -webkit-linear-gradient(top, #e64522, #c33219); border: 1px solid #c33219; text-shadow: 0 -1px -1px #972412; } a.button-googleplus:hover { background: -moz-linear-gradient(top, #c33219, #e64522); background: -webkit-linear-gradient(top, #c33219, #e64522); }

/* LinkedIn ------------------------------------------------------------ */ a.button-linkedin { background-color: #0073b2; /* fallback color */ background: -moz-linear-gradient(top, #009cda, #0073b2); background: -webkit-linear-gradient(top, #009cda, #0073b2); border: 1px solid #0073b2; text-shadow: 0 -1px -1px #005486; } a.button-linkedin:hover { background: -moz-linear-gradient(top, #0073b2, #009cda); background: -ms-linear-gradient(top, #0073b2, #009cda); background: -webkit-linear-gradient(top, #0073b2, #009cda); }

/* Pinterest ------------------------------------------------------------ */ a.button-pinterest { background-color: #a0171c; /* fallback color */ background: -moz-linear-gradient(top, #cb2027, #a0171c); background: -ms-linear-gradient(top, #cb2027, #a0171c); background: -webkit-linear-gradient(top, #cb2027, #a0171c); border: 1px solid #a0171c; text-shadow: 0 -1px -1px #761114; } a.button-pinterest:hover { background: -moz-linear-gradient(top, #a0171c, #cb2027); background: -ms-linear-gradient(top, #a0171c, #cb2027); background: -webkit-linear-gradient(top, #a0171c, #cb2027); }

/* RSS ------------------------------------------------------------ */ a.button-rss { background-color: #e2733d; /* fallback color */ background: -moz-linear-gradient(top, #e88845, #e2733d); background: -ms-linear-gradient(top, #e88845, #e2733d); background: -webkit-linear-gradient(top, #e88845, #e2733d); border: 1px solid #e2733d; text-shadow: 0 -1px -1px #9a4824; } a.button-rss:hover { background: -moz-linear-gradient(top, #e2733d, #e88845); background: -ms-linear-gradient(top, #e2733d, #e88845); background: -webkit-linear-gradient(top, #e2733d, #e88845); }

/* Tumblr ------------------------------------------------------------ */ a.button-tumblr { background-color: #2c4762; /* fallback color */ background: -moz-linear-gradient(top, #3a5876, #2c4762); background: -ms-linear-gradient(top, #3a5876, #2c4762); background: -webkit-linear-gradient(top, #3a5876, #2c4762); border: 1px solid #2c4762; text-shadow: 0 -1px -1px #203448; } a.button-tumblr:hover { background: -moz-linear-gradient(top, #2c4762, #3a5876); background: -ms-linear-gradient(top, #2c4762, #3a5876); background: -webkit-linear-gradient(top, #2c4762, #3a5876); }

/* Twitter ------------------------------------------------------------ */ a.button-twitter { background-color: #0081ce; /* fallback color */ background: -moz-linear-gradient(top, #00aced, #0081ce); background: -ms-linear-gradient(top, #00aced, #0081ce); background: -webkit-linear-gradient(top, #00aced, #0081ce); border: 1px solid #0081ce; text-shadow: 0 -1px -1px #005ea3; } a.button-twitter:hover { background: -moz-linear-gradient(top, #0081ce, #00aced); background: -ms-linear-gradient(top, #0081ce, #00aced); background: -webkit-linear-gradient(top, #0081ce, #00aced); }

BG

Est. 1974

How to Create Social Media Buttons With CSS3 Gradients

Creating the Social Media Buttons