Membuat Tombol Download Dengan Animasi Slide

Kali ini aku akan share cara menciptakan tombol download dengan animasi slide yang menampilkan size file download dikala di-hover mouse dengan CSS3.

Tombol download ini aku temukan dikala jalan-jalan pagi tadi. Kemudian aku coba dengan sedikit modifikasi biar dapat 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 memakai tombol download pada postingannya, Anda dapat mencoba memakai tombol download dengan animasi ini untuk show hide ukuran file download-nya.

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



2. Untuk tombol download dengan slide ke bawah dapat Anda lihat pada animasi gif di bawah ini dan untuk mendapat 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 isyarat </head>. Bagi yang sudah memakai 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"/>

Sumber https://www.kompiajaib.com/

0 Response to "Membuat Tombol Download Dengan Animasi Slide"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel