03-02-2014, 01:53 PM
0
Hola gente espero que esten bien, hoy les vengo compartiendo un diseño muy simple espero les guste 
nose si pueda colocar un enlace externo, pero es la unica demo que tengo, asi que si hay algun problema me avisan,
Los Estilos Los Pegamos En Nuestro Archivo .css
Código:
.socials{
position: relative;
margin: 0 auto;
padding: 0;
width: 17.4%;
}
.socials a{
background-image: url("images-jv/socials.png");
position: relative;
display: inline-block;
width: 35px;
height: 35px;
transition: all .3s ease-in-out 0s;
-webkit-transition: all .3s ease-in-out 0s;
-moz-transition: all .3s ease-in-out 0s;
-o-transition: all .3s ease-in-out 0s;
}
.socials .f{
background-position: 0px 0px;
}
.socials .t{
background-position: 0px 71px;
}
.socials .y{
background-position: 0px -68px;
}
.socials .f:hover{
background-position: 0px -34px;
}
.socials .t:hover{
background-position: 0px 35px;
}
.socials .y:hover{
background-position: 0px -103px;
}Ahora vamos con el html, lo pegamos donde queramos el efecto
Código:
<div class="socials">
<a class="f" href=""></a>
<a class="t" href=""></a>
<a class="y" href=""></a>
</div>nose si pueda colocar un enlace externo, pero es la unica demo que tengo, asi que si hay algun problema me avisan,
DEMO
![[Imagen: banner-colabora.gif]](https://lagrihost.com/banner-colabora.gif)
![[Imagen: 8mt2wBp.jpg]](https://i.imgur.com/8mt2wBp.jpg)
