Social buttons design with transition effects

Social media buttons with cool transition effects

I have create the social button with CSS transition effect on mouse hover.

<a href="" class="social facebook">FACEBOOK</a>
<a href="" class="social google-pluse">Google+</a>
<a href="" class="social twitter">Twitter</a>
<a href="" class="social blogger">Blogger</a>
<a href="" class="social wordpress">WordPress</a>
<a href="" class="social yahoo">Yahoo</a>
<a href="" class="social youtube">YouTube</a>
<a href="" class="social tumblr">Tumblr</a>
<a href="" class="social skype">Skype</a>
<a href="" class="social pinterest">Pinterest</a>
<a href="" class="social linkedin">LinkedIn</a>
<a href="" class="social rss">RSS</a>

body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#27292B;font-size:14px;font-family:arial, sans-serif;overflow-x:hidden;margin:0;padding:20px;}
a{-webkit-transition:all .3s ease-in 0;-moz-transition:all .3s ease-in 0;transition:all .3s ease-in 0;text-decoration:none;outline:0;}
.social{display:inline-block;color:#FFF;font-size:1.08em;text-transform:uppercase;line-height:50px;letter-spacing:2px;border:2px solid #FFF;width:125px;margin-bottom:10px;text-align:center;padding:0 30px;}
.social:hover{background-color:#fff;color:#000;}
.facebook:hover{border:2px solid rgba(59,89,152,0.2);background-color:#3b5998;color:#FFF;}
.google-pluse:hover{border:2px solid rgba(221,75,57,0.2);background-color:#dd4b39;color:#FFF;}
.twitter:hover{border:2px solid rgba(0,172,238,0.2);background-color:#00acee;color:#FFF;}
.blogger:hover{border:2px solid rgba(252,79,8,0.2);background-color:#fc4f08;color:#FFF;}
.wordpress:hover{border:2px solid rgba(33,117,155,0.2);background-color:#21759b;color:#FFF;}
.yahoo:hover{border:2px solid rgba(114,14,158,0.2);background-color:#720e9e;color:#FFF;}
.youtube:hover{border:2px solid rgba(196,48,43,0.2);background-color:#c4302b;color:#FFF;}
.tumblr:hover{border:2px solid rgba(52,82,111,0.2);background-color:#34526f;color:#FFF;}
.skype:hover{border:2px solid rgba(0,175,240,0.2);background-color:#00aff0;color:#FFF;}
.pinterest:hover{border:2px solid rgba(200,35,44,0.2);background-color:#c8232c;color:#FFF;}
.linkedin:hover{border:2px solid rgba(14,118,168,0.2);background-color:#0e76a8;color:#FFF;}
.rss:hover{border:2px solid rgba(238,128,47,0.2);background-color:#ee802f;color:#FFF;}

DEMO