Social Share Button with CSS and HTML

Social Share Button with CSS and HTML

CSS Social Share Button / Social Share Button with CSS and HTML / Boton de redes sociales deslizante con CSS Y HTML

By Alex


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


HTML

<div class="share-button">
 <span>Share Me</span>
 <a href="#" ><i class="fa fa-facebook-f"></i></a>
 <a href="#" ><i class="fa fa-twitter"></i></a>
 <a href="#" ><i class="fa fa-instagram"></i></a>
 <a href="#" ><i class="fa fa-youtube"></i></a>
</div>

Font Awesome CDN

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
CSS

body{background:#f1f1f1;margin:0;padding:0;display:flex;align-items:center;justify-content:center;height:100vh}
.share-button{widith:280px;height:80px;background:#dfe6e9;border-radius:40px;display:flex;align-items:center;justify-content:center;padding:0 50px;overflow:hidden;position:relative;cursor:pointer;transition:.3s linear}
.share-button:hover{transform:scale(1.1)}
.share-button span{position:absolute;width:100%;height:100%;background:#2d3436;color:#f1f1f1;text-align:center;line-height:80px;z-index:999;transition:.6s linear;border-radius:40px}
.share-button:hover span{transform:translateX(-100%);transition-delay:.3s}
.share-button a{flex:1;font-size:26px;margin-right:20px;color:#2d3436;text-align:center;transform:translateX(-100%);opacity:0;transition:.3s linear}
.share-button:hover a{opacity:1;transform:translateX(0)}
.share-button a:nth-of-type(1){transition-delay:1s}
.share-button a:nth-of-type(2){transition-delay:.8s}
.share-button a:nth-of-type(3){transition-delay:.6s}
.share-button a:nth-of-type(4){transition-delay:.4s}
¿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