Membuat Tombol Download Dengan Animasi Slide

Membuat Tombol Download Dengan Animasi Slide

Bola Hero Gawai

Membuat Tombol Download Dengan Animasi Slide

Tombol Download Dengan Animasi Slide
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 Slide Samping

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 Slide Bawah

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"/>

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×