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 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);
}