Media Icons with CSS

Media Icons CSS – Redes sociales iconos con efectos Hover css.

BY matt henley

<div class="social-container">
 <ul class="social-icons">
 <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 <li><a href="#"><i class="fa fa-twitter"></i></a></li>
 <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
 <li><a href="#"><i class="fa fa-codepen"></i></a></li>
 </ul>
</div>

.social-container{width:400px;margin:40vh auto;text-align:center}
.social-icons{padding:0;list-style:none;margin:1em}
.social-icons li{display:inline-block;margin:.15em;position:relative;font-size:1.2em}
.social-icons i{color:#fff;position:absolute;top:21px;left:21px;transition:all 265ms ease-out}
.social-icons a{display:inline-block}
.social-icons a:before{transform:scale(1);-ms-transform:scale(1);-webkit-transform:scale(1);content:" ";width:60px;height:60px;border-radius:100%;display:block;background:linear-gradient(45deg,#00B5F5,#002A8F);transition:all 265ms ease-out}
.social-icons a:hover:before{transform:scale(0);transition:all 265ms ease-in}
.social-icons a:hover i{transform:scale(2.2);-ms-transform:scale(2.2);-webkit-transform:scale(2.2);color:#00B5F5;background:-webkit-linear-gradient(45deg,#00B5F5,#002A8F);-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all 265ms ease-in}