facebook instagram share button

Facebook instagram share button

Facebook/instagram/youtube share button – Botones de compartir para facebook, instagram e youtube.

BY Nicolas Culotta


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS



<div class="btn__container">
 <a href="#" class="btn">
 <i class="fa fa-instagram"></i>
 <span>instagram</span>
 </a>
 <a href="#" class="btn-f">
 <i class="fa fa-facebook"></i>
 <span>facebook</span>
 </a>
 <a href="#" class="btn-y">
 <i class="fa fa-youtube"></i>
 <span>youtube</span>
 </a></div>
CSS

.btn__container{height:100vh;display:flex;justify-content:center;align-items:center}
.btn__container a{margin-right:10px}
.btn{min-width:110px;background-color:#fff;padding:1rem 2rem;text-decoration:none;color:#C71E7E;display:flex;transition:all .2s ease-in-out}
.btn i{color:#DF3796;font-size:20px;padding-right:10px;transition:all .3s ease-in-out}
.btn span{font-family:Roboto,sans-serif;align-self:center;-webkit-transform:translateX(0px);transform:translateX(0px);transition:all .1s ease-in-out;opacity:1}
.btn:hover{-webkit-transform:scale(1.1);transform:scale(1.1);background:linear-gradient(to right,#ff3019 0,#c90477 100%);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.btn:hover i{-webkit-transform:translateX(45px);transform:translateX(45px);padding-right:0;color:#FFF}
.btn:hover span{-webkit-transform:translateX(30px);transform:translateX(30px);opacity:0}
.btn:active{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 2px 10px rgba(0,0,0,.1)}
.btn-f{min-width:110px;background-color:#fff;padding:1rem 2rem;text-decoration:none;color:#286ED6;display:flex;transition:all .2s ease-in-out}
.btn-f i{color:#286ED6;font-size:20px;padding-right:10px;transition:all .3s ease-in-out}
.btn-f span{font-family:Roboto,sans-serif;align-self:center;-webkit-transform:translateX(0px);transform:translateX(0px);transition:all .1s ease-in-out;opacity:1}
.btn-f:hover{-webkit-transform:scale(1.1);transform:scale(1.1);background-color:#286ED6;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.btn-f:hover i{-webkit-transform:translateX(45px);transform:translateX(45px);padding-right:0;color:#FFF}
.btn-f:hover span{-webkit-transform:translateX(30px);transform:translateX(30px);opacity:0}
.btn-f:active{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 2px 10px rgba(0,0,0,.1)}
.btn-y{min-width:110px;background-color:#fff;padding:1rem 2rem;text-decoration:none;color:red;display:flex;transition:all .2s ease-in-out}
.btn-y i{color:red;font-size:20px;padding-right:10px;transition:all .3s ease-in-out}
.btn-y span{font-family:Roboto,sans-serif;align-self:center;-webkit-transform:translateX(0px);transform:translateX(0px);transition:all .1s ease-in-out;opacity:1}
.btn-y:hover{-webkit-transform:scale(1.1);transform:scale(1.1);background-color:red;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.btn-y:hover i{-webkit-transform:translateX(45px);transform:translateX(45px);padding-right:0;color:#FFF}
.btn-y:hover span{-webkit-transform:translateX(30px);transform:translateX(30px);opacity:0}
.btn-y:active{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 2px 10px rgba(0,0,0,.1)}
¿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