Botão para redes sociais com efeito

Views:
<style>
#socialbyelaine{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#socialbyelaine a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#socialbyelaine li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#socialbyelaine .facebook, .googleplus, .pinterest, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:10px 0 0;
width:210px;
height:38px;
border-radius:5px;
background:url(https://2.bp.blogspot.com/-EHtHFJOnVz0/WzePM0mqVjI/AAAAAAABfiM/MLF8eADs0K4Bv3wWtXmPxn_zpSYx_lU4ACLcBGAs/s1600/icons.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#socialbyelaine li:after{
position:absolute;
top:0; left:50px;
z-index:2;
display:block;
height:38px;
color:#141414;
content:attr(data-alt);
line-height:32px;
}
#socialbyelaine .icon{
overflow:hidden;
color:#fafafa;
}
#socialbyelaine .facebook{width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#socialbyelaine .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#socialbyelaine .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#socialbyelaine .pinterest{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:0 -95px;
}
#socialbyelaine .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#socialbyelaine li:hover .icon, .touch #socialbyelaine li .icon{
width:210px;
}
.touch #socialbyelaine li .facebook, #socialbyelaine li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #socialbyelaine li .twitter, #socialbyelaine li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #socialbyelaine li .googleplus, #socialbyelaine li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #socialbyelaine li .pinterest, #socialbyelaine li:hover .pinterest{
background-color:rgba(174,45,39,1);
}
.touch #socialbyelaine li .rss, #socialbyelaine li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>

<ul id="socialbyelaine">
<li data-alt="Facebook"><a class="icon facebook" href="ENDEREÇO DO FACEBOOK">Curta no Facebook</a></li>
<li data-alt=" Twitter"><a class="icon twitter" href="ENDEREÇO DO TWITTER">Siga no Twitter</a></li>
<li data-alt=" Google+"><a class="icon googleplus" href="ENDEREÇO GOOGLE PLUS"> Acompanhe no Google+</a></li>
<li data-alt=" Pinterest"><a class="icon pinterest" href="ENDEREÇO PINTEREST">Siga no  Pinterest</a></li>
</ul>


Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage