Create social media buttons with CSS3 gradients.

dribbble.css

/*
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-color: #ea4c89; /* fallback color */
	background: -moz-linear-gradient(top, #c93764, #ea4c89);
	background: -ms-linear-gradient(top, #c93764, #ea4c89);
	background: -webkit-linear-gradient(top, #c93764, #ea4c89);
}

facebook.css

/*
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-color: #3b5998; /* fallback color */
	background: -moz-linear-gradient(top, #2b4170, #3b5998);
	background: -ms-linear-gradient(top, #2b4170, #3b5998);
	background: -webkit-linear-gradient(top, #2b4170, #3b5998);
}

global-styles.css

/*
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 20px 20px 0;
	margin: 0 2rem 2rem 0;
	padding: 10px 15px;
	padding: 1rem 1.5rem;
	text-align: center;
	width: 140px;
}

google-plus.css

/*
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-color: #e64522; /* fallback color */
	background: -moz-linear-gradient(top, #c33219, #e64522);
	background: -ms-linear-gradient(top, #c33219, #e64522);
	background: -webkit-linear-gradient(top, #c33219, #e64522);
}

linked-in.css

/*
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-color: #009cda; /* fallback color */
	background: -moz-linear-gradient(top, #0073b2, #009cda);
	background: -ms-linear-gradient(top, #0073b2, #009cda);
	background: -webkit-linear-gradient(top, #0073b2, #009cda);
}

pinterest.css

/*
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-color: #cb2027; /* fallback color */
	background: -moz-linear-gradient(top, #a0171c, #cb2027);
	background: -ms-linear-gradient(top, #a0171c, #cb2027);
	background: -webkit-linear-gradient(top, #a0171c, #cb2027);
}

rss.css

/*
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-color: #e88845; /* fallback color */
	background: -moz-linear-gradient(top, #e2733d, #e88845);
	background: -ms-linear-gradient(top, #e2733d, #e88845);
	background: -webkit-linear-gradient(top, #e2733d, #e88845);
}

sample.html

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

tumblr.css

/*
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-color: #3a5876; /* fallback color */
	background: -moz-linear-gradient(top, #2c4762, #3a5876);
	background: -ms-linear-gradient(top, #2c4762, #3a5876);
	background: -webkit-linear-gradient(top, #2c4762, #3a5876);
}

twitter.css

/*
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-color: #00aced; /* fallback color */
	background: -moz-linear-gradient(top, #0081ce, #00aced);
	background: -ms-linear-gradient(top, #0081ce, #00aced);
	background: -webkit-linear-gradient(top, #0081ce, #00aced);
}