05-02-2014, 03:30 PM
0
Hola gente les traigo este nuevo diseño recien salido del Horno 

El Css Lo Colocan en su archivo de estilos
Cita:.social-v2{
position: relative;
margin: 0;
padding: 0;
}
.social-v2 a{
background-image: url(http://i5.minus.com/jE7M2GirFwiyd.png);
position: relative;
background-repeat: no-repeat;
display: inline-block;
background-position: 0px -84px;
background-size: auto 120px;
margin: 0;
padding: 0;
width: 38px;
height: 36px;
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-ms-transition: all 300ms;
-o-transition: all 300ms;
}
.social-v2 .f{
background-position: 0px -84px;
}
.social-v2 .f:hover{
background-position: 0px -43px;
}
.social-v2 .g{
background-position: -120px -84px;
}
.social-v2 .g:hover{
background-position: -120px -43px;
}
.social-v2 .y{
background-position: -401px -84px;
}
.social-v2 .y:hover{
background-position: -401px -43px;
}
.social-v2 .t{
background-position: -320px -84px;
}
.social-v2 .t:hover{
background-position: -320px -43px;
}
.social-v2 .s{
background-position: -281px -84px;
}
.social-v2 .s:hover{
background-position: -281px -43px;
}
.social-v2 .r{
background-position: -240px -84px;
}
.social-v2 .r:hover{
background-position: -240px -43px;
}
.social-v2 .v{
background-position: -361px -84px;
}
.social-v2 .v:hover{
background-position: -361px -43px;
}
El Html Lo Colocaran Donde Quieran El Efecto 

Cita:<div class="social-v2">
<a class="f" href=""></a>
<a class="g" href=""></a>
<a class="y" href=""></a>
<a class="t" href=""></a>
<a class="s" href=""></a>
<a class="r" href=""></a>
<a class="v" href=""></a>
</div>
Demo
I Programer