A few months ago I published a post on how to add color buttons to your Genesis-powered website. Today 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:
DribbbleFacebookGoogleLinkedInPinterestTumblr
You might be asking yourself where you can use something like the social media buttons. Two places to implement these would be in the top right section of your header or in your sidebar.
Implementing the CSS3 Gradient Social Media Buttons
Create a text widget and add a class to your link. Here’s an example for Dribbble:
<a class="button-dribbble" href="#">Follow me on Dribbble</a> Add Gradient Social Media Button CSS to Your Style Sheet
In your theme’s style.css file, place the code below. This is the global rules for all buttons:
/* 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; } Add the following CSS for the Dribbble gradient social media button:
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); } Add the following CSS for the Facebook gradient social media button:
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); } Add the following CSS for the Google Plus gradient social media button:
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); } Add the following CSS for the LinkedIn gradient social media button:
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); } Add the following CSS for the Pinterest gradient social media button:
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); } Add the following CSS for the RSS gradient social media button:
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); } Add the following CSS for the Tumblr gradient social media button:
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); } Add the following CSS for the Twitter gradient social media button:
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); } It’s THAT simple. Now add some gradient social media buttons to your website, and stand out!
Link
