Cara Membuat Social Button Dengan CSS Efek Slide

Cara Membuat Social Button Dengan CSS Efek Slide - Hampir sama dengan beberapa postingan saya sebelumnya. Cara Membuat Social Button Dengan CSS Efek Slide Maksudnya Adalah Cara untuk membuat tombol sosial untuk kontak para pengunjung blog agar lebih mudah dalam pengaksesan. Cara nya sangatlah mudah. anda hanya perlu menambah sedikit Tag HTML. Berikut adalah tutorial Cara Membuat Social Button Dengan CSS Efek Slide. Check IT Out.

1. Masuk akun Blogger sobat.
2. Masuk tab rancangan >> Tata letak >> Add gadget.
3. Tambahkan kode berikut.

<style type='text/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;
}
</style>
<div class="socialw fadeInDown">
 
<!-- Dribbble !-->
<a href="http://dribbble.com/zakaria" target="_blank">      
<div class="social first"> <img src="http://i.imgur.com/64r2jAv.png"/></div>
</a>
<!-- Dribbble !-->

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

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

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

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

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

4. Simpan. Lihat hasilnya.

Catatan: Ganti kode yang saya beri warna Merah dengan ID Anda masing masing.

Sekiat tutorial Cara Membuat Social Button Dengan CSS Efek Slide Semoga bisa sedikit bermanfaat.