Social Media icon reveal with transition CSS

Social Media icon reveal with transition – Botones sociales deslizante con transición.

BY Stefan Göllner

HTML

<div class="wrap">
 <div class="social">
 <a href="#" target="blank_"><i class="fb fa fa-facebook"></i></a>
 <a href="#" target="blank_"><i class="tw fa fa-twitter"></i></a>
 <a href="#" target="blank_"><i class="in fa fa-instagram"></i></a>
 <a href="#" target="blank_"><i class="yt fa fa-youtube"></i></a>
 <a href="#" target="blank_"><i class="pt fa fa-pinterest"></i></a>
 </div>
</div>


CSS

@-webkit-keyframes wiggle{0%{-webkit-transform:rotateZ(2deg);transform:rotateZ(2deg)}
50%{-webkit-transform:rotateZ(-2deg);transform:rotateZ(-2deg)}
100%{-webkit-transform:rotateZ(2deg);transform:rotateZ(2deg)}}
*,::after,::before{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box}
.wrap{width:35%;margin:100px auto;text-align:center}
.social{font-size:2.5em;height:50px;overflow:hidden;border-bottom:1px solid #abc}
i{position:relative;top:30px;margin:0 10px;transition:all 100ms cubic-bezier(0.42,0,.58,1)}
i:hover{top:5px}
.fb{color:#3b5998}
.tw{color:#09AEEC}
.yt{color:red}
.in{color:#c13584}
.pt{color:#bd081c}
¿Te gusto el post?
¡Compártelo!

Adblock Detectado

Apoya este sitio desactivando el Adblock para seguir navegando. ¡Gracias!

¡Ya Desactive el Adblock!