Membuat Tombol Social Icon Dengan Efect Sliding

Setelah pada kesempatan lain membahas tentang Membuat Menu Dengan CSS Border Animation maka pada postingan kali ini saya akan mencoba kembali berbagi sebuah tuorial sederhana. Brada pasti tahu tentang social icon ?.. yups itu hal yang lazim kita temui pada sebuah web/blog dan seperti yang kita tahu keberadaannya merupakan satu hal yang penting bagi perkembangan/popularitas web/blog . Social icon kali ini tampilannya cukup sederhana tapi tidak sesederhana itu karena efect slidingnya akan membuatnya tampil menarik.

SEE DEMO

Komposisi

CSS

.socialw {
    width: 235px;
    margin: 100px auto 0 auto;
    overflow: auto;
    height: 100%;
}
.social{
  position:relative;
    border: 1px solid #292929;
    width: 37px;
    height: 62px;
    float: left;
    margin-left: 10px;
    overflow: hidden;
}
.first {
    margin-left: 0px;
}

/*    ANIMATIONS   */

/* Fade In Down */
@-webkit-keyframes fadeInDown {
0% {  opacity: 0;  -webkit-transform: translateY(-100px);  }    
100% {  opacity: 1;  -webkit-transform: translateY(0);    }
}

@-moz-keyframes fadeInDown {
0% {  opacity: 0;  -moz-transform: translateY(-100px);    }    
100% {  opacity: 1;  -moz-transform: translateY(0);  }
}

@-o-keyframes fadeInDown {
0% {  opacity: 0;  -o-transform: translateY(-100px);    }    
100% {  opacity: 1;  -o-transform: translateY(0);  }
}

@keyframes fadeInDown {
0% {  opacity: 0;  transform: translateY(-100px);    }    
100% {  opacity: 1;  transform: translateY(0);    }
}

.fadeInDown {
-webkit-animation: fadeInDown 1s both 0.5s;
-moz-animation: fadeInDown 1s both 0.5s;
-o-animation: fadeInDown 1s both 0.5s;
animation: fadeInDown 1s both 0.5s;
}
/* Fade In Down */

/* Social Transition */

.social img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top 250ms ease-in;
-moz-transition: margin-top 250ms ease-in;
-o-transition:  margin-top 250ms ease-in;
transition:  margin-top 250ms ease-in;
}
.social:hover img{
margin-top:-62px;
}

HTML

<div class="socialw fadeInDown">  
  
<!-- Dribbble !-->
<a href="http://dribbble.com" target="_blank">        
<div class="social first"> <img src="http://i.imgur.com/64r2jAv.png"/></div>
</a>
<!-- Dribbble !-->

<!-- Behance !-->
<a href="http://behance.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/fkuhUov.png"/></div>
</a>
<!-- Behance !-->

<!-- Facebook !-->
<a href="http://facebook.com" target="_blank">        
<div class="social"><img src="http://i.imgur.com/PY2EPRW.png"/></div>
</a>
<!-- Facebook !-->

<!-- Twitter !-->
<a href="http://twitter.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/ny0pyqt.png"/> </div>
</a>
<!-- Twitter !-->

<!-- Intagram !-->
<a href="http://instagram.com" target="_blank">        
<div class="social"> <img src="http://i.imgur.com/tZZG2zQ.png"/></div>
</a>
<!-- Instagram !-->

</div>
<!-- Social Icons End !-->

Simpan CSS diatas kode ]]></b:skin> atau </style> dan HTML sesuka hati hehe...

Resource : Basic /*///Created by Ryan Bishop.///