Membuat Tombol Download dengan Animasi Slide

Bikin tombol download dengan animasi

Kali ini saya akan share cara membuat tombol download dengan animasi slide yang menampilkan size file download ketika di-hover mouse dengan CSS3.

Tombol download ini saya temukan ketika jalan-jalan pagi tadi. Kemudian saya coba dengan sedikit modifikasi agar bisa slide ke samping atau pun ke bawah dan menambahkan ikon download dengan font awesome.

Bagi yang menggunakan tombol download pada postingannya, Anda bisa mencoba menggunakan tombol download dengan animasi ini untuk show hide ukuran file download-nya.

1. Untuk tombol download dengan slide ke samping / right bisa Anda lihat pada animasi gif di bawah ini dan untuk mendapatkan kode-kode CSS dan HTML silahkan masuk ke link demo JSFiddle di bawahnya.

Download Button Animate Slide Right

DEMO JSFIDDLE

2. Untuk tombol download dengan slide ke bawah / down bisa Anda lihat pada animasi gif di bawah ini dan untuk mendapatkan kode-kode CSS dan HTML silahkan masuk ke link demo JSFiddle di bawahnya.

Download Button Animate Slide Down

DEMO JSFIDDLE

Dan silahkan tambahkan link CSS style font awesome di bawah ini di atas kode </head>. Bagi yang sudah menggunakan font awesome (font awesome versi 4.4.0) silahkan lewati langkah ini.