Pure CSS3 Social Buttons for Blogger

A few months ago I published a post on how to add Pure CSS3 Button to your Blog or Website. Today I’d like to give you how to create social media buttons using CSS3 gradients.

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.

DEMO

The CSS

Add below CSS codes just above ]]></b:skin> in your Blogger template

a.button-facebook,
a.button-googleplus,
a.button-linkedin,
a.button-pinterest,
a.button-rss,
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;
    text-decoration:none;
}
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);
}
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);
}
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);
}
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);
}
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);
}
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);
}

Usage

Just customize and paste below codes where you want to show the Social Buttons

<a class="button-facebook" href="FB-LINK">Facebook</a>
<a class="button-googleplus" href="G+-LINK">Google+</a>
<a class="button-twitter" href="TWITTER-LINK">Twitter</a>
<a class="button-linkedin" href="LI-LINK">LinkedIn</a>
<a class="button-rss" href="RSS-URL">RSS</a>
<a class="button-pinterest" href="PINTEREST-LINK">Pinterest</a>

And that’s it! Check out the Preview! Thanks.