Flat Social Button Design With Cool Hover Effects

Flat social media icon round button design

<div class="media"> 
    <a target="_blank" href="http://www.jquery2dotnet.com" class="ml"><i class="icon-envelope-alt icon-1x"></i></a>
 <a target="_blank" href="http://www.jquery2dotnet.com" class="tw"><i class="icon-twitter icon-1x"></i></a>
 <a target="_blank" href="http://www.jquery2dotnet.com" class="db"><i class="icon-dribbble icon-1x"></i></a>
 <a target="_blank" href="http://www.jquery2dotnet.com" class="fb"><i class="icon-facebook icon-1x"></i></a>
    <a target="_blank" href="http://www.jquery2dotnet.com" class="gp"><i class="icon-google-plus icon-1x"></i></a>
    <a target="_blank" href="http://www.jquery2dotnet.com" class="li"><i class="icon-linkedin icon-1x"></i></a>
    <a target="_blank" href="http://www.jquery2dotnet.com" class="pi"><i class="icon-pinterest icon-1x"></i></a>
    <a target="_blank" href="http://www.jquery2dotnet.com" class="sk"><i class="icon-skype icon-1x"></i></a>
</div>

body{background:#505060;padding:20px;}
.media a{border-radius:40px;border:1px solid rgba(255,255,255,0.2);color:#FFF;display:inline-block;height:45px;-webkit-transition:all .3s ease-in 0;-moz-transition:all .3s ease-in 0;transition:all .3s ease-in 0;vertical-align:middle;width:45px;text-align:center;opacity:0.7;margin:.5em .7em 0 0;}
a{color:#FFF;text-decoration:none;}
.media i{display:inline-block;margin-top:8px;}
.icon-1x{font-size:1.7em;}
.media a.ml:hover{background-color:#FD6E6E;border:1px solid #FD6E6E;}
.media a.tw:hover{background-color:#32CDFB;border:1px solid #32CDFB;}
.media a.db:hover{background-color:#D45C8C;border:1px solid #D45C8C;}
.media a.fb:hover{background-color:#5171B9;border:1px solid #5171B9;}
.media a.gp:hover{background-color:#dd4b39;border:1px solid #dd4b39;}
.media a.li:hover{background-color:#0e76a8;border:1px solid #0e76a8;}
.media a.pi:hover{background-color:#c8232c;border:1px solid #c8232c;}
.media a.sk:hover{background-color:#00aff0;border:1px solid #00aff0;}

DEMO