Pure CSS3 Social Buttons For Blogger

Προσθήκη CSS παρακάτω κωδικούς ακριβώς πάνω ]]> </ b:> 

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

Απλά προσαρμόσετε και να επικολλήσετε τους κωδικούς παρακάτω όπου θέλετε να δείτε

<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>

Και αυτό είναι αυτό! Δείτε την προεπισκόπηση!  DEMO
ΠΗΓΗ