Stylish Social Buttons

Stylish Social Buttons – Elegantes Botones sociales

BY Chris Deacy


<div class="social-btns">
 <a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
 <a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
 <a class="btn instagram" href="#"><i class="fa fa-instagram"></i></a>
 <a class="btn youtube" href="#"><i class="fa fa-youtube"></i></a>
 </div>


CSS

.social-btns .btn,.social-btns .btn .fa,.social-btns .btn:before{transition:all .35s;transition-timing-function:cubic-bezier(0.31,-.105,.43,1.59)}
.social-btns .btn:before{top:90%;left:-110%}
.social-btns .btn .fa{-webkit-transform:scale(0.8);transform:scale(0.8)}
.social-btns .btn.facebook:before{background-color:#3b5998}
.social-btns .btn.facebook .fa{color:#3b5998}
.social-btns .btn.twitter:before{background-color:#3cf}
.social-btns .btn.twitter .fa{color:#3cf}
.social-btns .btn.youtube:before{background-color:red}
.social-btns .btn.youtube .fa{color:red}
.social-btns .btn.instagram:before{background-color:#c13584}
.social-btns .btn.instagram .fa{color:#c13584}
.social-btns .btn:focus:before,.social-btns .btn:hover:before{top:-10%;left:-10%}
.social-btns .btn:focus .fa,.social-btns .btn:hover .fa{color:#fff;-webkit-transform:scale(1);transform:scale(1)}
.social-btns{height:90px;margin:auto;font-size:0;text-align:center;position:absolute;top:0;bottom:0;left:0;right:0}
.social-btns .btn{display:inline-block;background-color:#fff;width:90px;height:90px;line-height:90px;margin:0 10px;text-align:center;position:relative;overflow:hidden;border-radius:28%;box-shadow:0 5px 15px -5px rgba(0,0,0,.1);opacity:.99}
.social-btns .btn:before{content:'';width:120%;height:120%;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.social-btns .btn .fa{font-size:38px;vertical-align:middle}
¿Te gusto el post?
¡Compártelo!