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.
![Tombol Download Dengan Animasi Slide Ke Samping Tombol Download Slide Samping](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLdZm2ANCMKPNGWV3oWza3MLKWwzbZV0ooTYngB4hFAPFGRRPjpI7RY4kXtP9I0rkSfaRuJ2JKU3IlTrLLGn7cDyAHqnijZelNv3oZSRlvVemzSX5jsokCqpIgo8rLjttOFuDFkjQYoji8/s1600/download-button1.gif)
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.
![Tombol Download Dengan Animasi Slide Ke Bawah Tombol Download Slide Bawah](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3UiUoWbmTGhg81sEx3Cs7WmjhmrUKmnhqCZUagTJD9HCeWb5X-8qpvGtBPp7SE5N4mRMh3cRMDtBPn1vQuXK-_1GzMZJ4XH-1Af86pFpIZXhV5eG-kUEWXZOimE_DRVMhj3jhgP-EXHqz/s1600/download-button2.gif)
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"/>