Skip to content

Instantly share code, notes, and snippets.

@leokovaski
Created March 17, 2017 18:38
Show Gist options
  • Save leokovaski/ec372c19c6384eed2d4f69f0347c24c8 to your computer and use it in GitHub Desktop.
Save leokovaski/ec372c19c6384eed2d4f69f0347c24c8 to your computer and use it in GitHub Desktop.
Create social media buttons with CSS3 gradients.
/*
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
------------------------------------------------------------ */
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
------------------------------------------------------------ */
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+
------------------------------------------------------------ */
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);
}
/*
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
------------------------------------------------------------ */
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
------------------------------------------------------------ */
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);
}
<a class="button-dribbble" href="#">Follow me on Dribbble</a>
/*
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
------------------------------------------------------------ */
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment