JSFiddle - React, Tailwind, and code Playground
by nomifrod
HTML
<ul class='social'>
<li><a class='google' href='#' target='_blank'>Google+</a></li>
<li><a class='facebook' href='#' target='_blank'>Facebook</a></li>
<li><a class='twitter' href='#' target='_blank'>Twitter</a></li>
<li><a class='youtube' href='#' target='_blank'>LinkedIn</a></li>
<li><a class='rss' href='#' target='_blank'>RSS</a></li>
<li><a class='pinterest' href='#' target='_blank'>Pinterest</a></li>
</ul>CSS
.social{clear:right;float:left;list-style:none;margin: 0px;margin-top: 8px;padding:0px;}
.footer .social{float:none;}
.footer .social li a{margin:0 5px 8px 0;}
.social li{display:inline-block;text-indent:-999em;}
.social li a{display:block;width:32px;height:32px;margin-left:5px; background-image:url(http://4.bp.blogspot.com/-PjcvpVfS1C0/UcROd4oGKbI/AAAAAAAABoU/Tw_A5tg12cY/s1600/Social.png);background-repeat:no-repeat;border-radius:16px;background-clip:padding;}
.social li:first-child a{margin-left:0;}
.social li a:hover{border-top-left-radius:0px;}
.social li a.facebook:hover{background-color:#3c5fac;}
.social li a.twitter{ background-position:-32px 0;}
.social li a.twitter:hover{background-color:#5ec3df;}
.social li a.rss{background-position:-96px 0;}
.social li a.rss:hover{background-color:#ff9900;}
.social li a.google{background-position:-256px 0;}
.social li a.google:hover { background-color:#c63d2d; }
.social li a.youtube { background-position:-384px 0; }
.social li a.youtube:hover { background-color:#c8312b; }
.social li a.pinterest { background-position:-416px 0; }
.social li a.pinterest:hover { background-color:#cb2027; }
.social li a.tumblr { background-image: url(http://2.bp.blogspot.com/-PKK39UadAWE/UcRPjEmNbJI/AAAAAAAABog/aaiRo1t-H5M/s1600/tumblr.png); }
.social li a.tumblr:hover { background-color: #2C4762; }
.social li a { background-color:#bbb;transition: all 0.3s ease-out;}