Ditulis oleh: Ditulis pada: 12/01/2014
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.
Source code: http://cssdeck.com/labs/animating-download-button
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 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.
2. Untuk tombol download dengan slide ke bawah 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.
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.2.0) silahkan lewati langkah ini.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>