Social media hover icons with pop-up titles

Social media hover icons with pop-up titles

Social media hover icons with pop-up titles – Botones redes sociales hover con pop-up CSS.
BY Kieran Hunter


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<div>
 <a href="#"><span>Facebook</span></a>
 <a href="#"><span>Twitter</span></a>
 <a href="#"><span>Google+</span></a>
 <a href="#"><span>Github</span></a>
 <a href="#"><span>Dribbble</span></a>
 <a href="#"><span>CodePen</span></a>
</div>


CSS

div{display:inline-block;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
a{color:#fff;background:#000;border-radius:4px;text-align:center;text-decoration:none;font-family:fontawesome;position:relative;display:inline-block;width:40px;height:28px;padding-top:12px;margin:0 2px;-o-transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;transition:all .5s;-webkit-font-smoothing:antialiased}
a:hover{background:#5d5c5c}
a span{color:#666;position:absolute;font-family:sans-serif;bottom:0;left:-25px;right:-25px;padding:5px 7px;z-index:-1;font-size:14px;border-radius:2px;background:#fff;visibility:hidden;opacity:0;-o-transition:all .5s cubic-bezier(0.68,-.55,.265,1.55);-webkit-transition:all .5s cubic-bezier(0.68,-.55,.265,1.55);-moz-transition:all .5s cubic-bezier(0.68,-.55,.265,1.55);transition:all .5s cubic-bezier(0.68,-.55,.265,1.55)}
a span:before{content:'';width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;position:absolute;bottom:-5px;left:40px}
a:hover span{bottom:50px;visibility:visible;opacity:1}
a:nth-of-type(1):before{content:'\f09a'}
a:nth-of-type(2):before{content:'\f099'}
a:nth-of-type(3):before{content:'\f0d5'}
a:nth-of-type(4):before{content:'\f113'}
a:nth-of-type(5):before{content:'\f17d'}
a:nth-of-type(6):before{content:'\f1cb'}
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones