Social Metro

HTML

<div id='widget-social'>
<ul class='kompisocial'>
<li class='youicon'>
<a href='/' target='_blank' title='Follow on Youtube'>Youtube</a>
</li><li class='rssicon'>
<a href='http://feeds.feedburner.com/GamerCoolest' target='_blank' title='Subscribe by RSS'>RSS</a>
</li><li class='gicon'>
<a href='https://plus.google.com/u/0/117950600521728942551' target='_blank' title='Follow on Google+'>Google Plus</a>
</li><li class='twicon'>
<a href='http://twitter.com/kompiajaib' target='_blank' title='Follow on Twitter'>Twitter</a>
</li><li class='fbicon'>
<a href='http://www.facebook.com/pages/Kompi-Ajaib/395526477133955' target='_blank' title='Like on Facebook'>Facebook</a>
</li>
</ul>
</div>

CSS

#widget-social{padding:0;margin:0 auto}
ul.kompisocial{border:0;list-style:none;overflow:hidden;margin:10px}
.kompisocial li{float:right;background:none!important;margin-left:4px;padding:0!important}
.kompisocial li a {display:block;width:57px;height:57px;background:url(http://3.bp.blogspot.com/-1aYkBbLiel0/UmlEYFTIlRI/AAAAAAAAaTU/EuB3HdSpDWM/s1600/mixicon.png) no-repeat transparent;text-indent:-99999em!important}
.kompisocial li a:hover{padding:0!important}
.kompisocial li.youicon a{background-position:-248px 0;transition:all 400ms ease-in-out}
.kompisocial li.rssicon a{background-position:-186px 0;transition:all 400ms ease-in-out}
.kompisocial li.gicon a{background-position:-124px 0;transition:all 400ms ease-in-out}
.kompisocial li.twicon a{background-position:-62px 0;transition:all 400ms ease-in-out}
.kompisocial li.fbicon a{background-position:0 0;transition:all 400ms ease-in-out}
.kompisocial li.youicon a:hover{background-position:-248px -62px}
.kompisocial li.rssicon a:hover{background-position:-186px -62px}
.kompisocial li.gicon a:hover{background-position:-124px -62px}
.kompisocial li.twicon a:hover{background-position:-62px -62px;}
.kompisocial li.fbicon a:hover{background-position:0 -62px}