Tombol Download Keren dengan Animasi CSS untuk Blogger

---

Peribahasa mengatakan apalah arti sebuah tombol. Untuk sebuah blog download, justru tombol bisa menjadi elemen penting karena membantu pengunjung mengenali dengan cepat link yang digunakan untuk mengunduh file.

Pada artikel ini saya memperbarui dua desain tombol download CodeFlare versi lama menjadi lebih ringan, responsive dan mudah digunakan pada artikel Blogger. Keduanya tetap menggunakan CSS native tanpa library JavaScript untuk animasi.

Tombol pertama menggunakan efek shine yang bergerak melintasi permukaan tombol, sedangkan desain kedua menggunakan bentuk kapsul dengan dua cahaya bergerak dari sisi kiri dan kanan.

Kode juga sudah dibuat lebih aman agar tidak terlalu mudah bentrok dengan class template Blogger lainnya. Semua class custom menggunakan prefix khusus CodeFlare.

Informasi Singkat

---

Tombol download pada dasarnya merupakan link HTML biasa yang dibuat memiliki tampilan khusus menggunakan CSS. Saat tombol diklik, browser akan membuka URL file atau halaman download yang terdapat pada atribut href.

Atribut HTML download juga dapat digunakan pada kondisi tertentu untuk meminta browser mengunduh file, tetapi perilakunya dapat berbeda jika file berada pada domain lain atau server mengirim aturan tertentu.

DAFTAR ISI CODEFLARE UI

01Tombol Download Shine 02Tombol Download Capsule 03Perbandingan Desain 04Kode Final 05Cara Memasang di Blogger 06Mengubah Warna dan Teks 07Generator Tombol Download 08Troubleshooting

Tombol Download 1 — Shine Button

Desain pertama menggunakan bentuk kotak dengan sudut sedikit melengkung. Efek cahaya berjalan dari kiri ke kanan secara berkala sehingga tombol terlihat aktif tanpa animasi yang terlalu berat.

Model seperti ini cocok digunakan untuk blog download aplikasi, software, file template, dokumen, source code atau halaman resource.

Download

Warna utamanya menggunakan biru CodeFlare #0083da. Pada saat hover, background menjadi sedikit lebih gelap dan tombol bergerak naik beberapa pixel untuk memberikan feedback visual.

Tombol Download 2 — Capsule Button

Desain kedua menggunakan bentuk kapsul. Dua efek cahaya bergerak dari sisi kiri dan kanan kemudian bertemu di area tengah tombol.

Saat hover, background berubah menjadi gradasi bergerak. Efek ini cocok jika tombol download ingin dibuat lebih menonjol daripada link biasa.

Download File

Perbandingan Kedua Tombol

Fitur Shine Capsule

Bentuk Kotak Kapsul

Animasi statis Shine Dua arah

Efek hover Darken Gradient

Responsive

JavaScript animasi Tidak Tidak

Kode Final Tombol Download

Jika hanya ingin menggunakan tombolnya, salin kode berikut. CSS cukup dipasang satu kali. Setelah itu setiap artikel hanya membutuhkan HTML tombol.

<!-- TOMBOL DOWNLOAD 1 -->
<div class="cfDlPreview">
  <a class="cfDlShine" href="https://example.com/file.zip" target="_blank" rel="noopener">
    <i class="fa fa-download" aria-hidden="true"></i>
    <span>Download</span>
  </a>
</div>

<!-- TOMBOL DOWNLOAD 2 -->
<div class="cfDlCapsuleWrap">
  <a class="cfDlCapsule" href="https://example.com/file.zip" target="_blank" rel="noopener">
    <i class="fa fa-download" aria-hidden="true"></i>
    <span>Download File</span>
  </a>
</div>

<style>
:root{--cfDlMain:#0083da;--cfDlDark:#006fb9;}

.cfDlPreview,.cfDlCapsuleWrap{display:flex;justify-content:center;width:100%;box-sizing:border-box;}

.cfDlShine{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 22px;overflow:hidden;box-sizing:border-box;background:var(--cfDlMain);color:#fff!important;border:1px solid rgba(0,0,0,.15);border-radius:7px;text-decoration:none!important;font-size:15px;font-weight:600;line-height:1.2;transition:transform .25s ease,background .25s ease,box-shadow .25s ease;}

.cfDlShine:before{content:"";position:absolute;top:0;left:-45px;width:25px;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-20deg);animation:cfDlShineMove 3.4s ease-in-out infinite;}

.cfDlShine:hover{background:var(--cfDlDark);transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,131,218,.24);}

.cfDlCapsuleWrap{position:relative;}

.cfDlCapsule{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:0 24px;overflow:hidden;box-sizing:border-box;background:var(--cfDlMain);color:#fff!important;border:1px solid rgba(0,0,0,.18);border-radius:30px;text-decoration:none!important;font-size:15px;font-weight:600;line-height:1.2;transition:transform .25s ease,box-shadow .25s ease;}

.cfDlCapsule:before,.cfDlCapsule:after{content:"";position:absolute;top:50%;width:6px;height:58%;transform:translateY(-50%);background:rgba(255,255,255,.72);filter:blur(.3px);}

.cfDlCapsule:before{left:-10px;animation:cfDlLightLeft 3s infinite linear;}
.cfDlCapsule:after{right:-10px;animation:cfDlLightRight 3s infinite linear;}

.cfDlCapsule:hover{background:linear-gradient(90deg,#0083da,#735bff,#f98500,#0083da);background-size:250% 100%;animation:cfDlGradient 1.4s linear infinite;transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,131,218,.24);}

.cfDlCapsule:hover:before,.cfDlCapsule:hover:after{animation-play-state:paused;}

@keyframes cfDlShineMove{0%,55%{left:-45px}100%{left:calc(100% + 45px)}}
@keyframes cfDlLightLeft{0%{left:-10px;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}
@keyframes cfDlLightRight{0%{right:-10px;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}
@keyframes cfDlGradient{0%{background-position:100% 50%}100%{background-position:-100% 50%}}

@media(prefers-reduced-motion:reduce){.cfDlShine:before,.cfDlCapsule:before,.cfDlCapsule:after,.cfDlCapsule:hover{animation:none}}

@media(max-width:480px){.cfDlShine,.cfDlCapsule{width:100%;max-width:280px;min-height:46px;padding:0 16px}}
</style>

WARNING

Jika template Blogger sudah memiliki class dengan nama yang mirip, jangan mengganti prefix cfDl. Prefix tersebut sengaja digunakan agar style tombol tidak mudah bentrok dengan CSS template lain.

Cara Memasang Tombol Download di Blogger

Untuk penggunaan pada artikel, tidak perlu membuat gadget HTML/JavaScript setiap kali ingin menambahkan tombol.

01

Pasang CSS Sekali

Buka Tema → Edit HTML, kemudian tempatkan CSS tombol sebelum kode </head> atau di area CSS template yang biasa digunakan.

02

Buka Artikel

Buat atau edit postingan kemudian pindah ke mode Tampilan HTML.

03

Masukkan HTML Tombol

Tempel HTML tombol pada posisi tempat tombol download ingin ditampilkan.

04

Ganti URL

Ganti https://example.com/file.zip dengan URL file atau halaman download sebenarnya.

05

Simpan dan Uji

Publikasikan atau gunakan preview kemudian cek tombol pada desktop dan smartphone.

Mengubah Warna dan Teks Tombol

Warna utama tombol diatur melalui CSS variable berikut:

:root{
  --cfDlMain:#0083da;
  --cfDlDark:#006fb9;
}

Misalnya ingin menggunakan warna orange, cukup ubah menjadi:

:root{
  --cfDlMain:#f98500;
  --cfDlDark:#d96f00;
}

Teks tombol juga dapat diganti langsung pada HTML.

<span>Download Template</span>

Icon dapat diganti dengan icon Font Awesome lain yang sudah tersedia pada template. Contohnya:

<i class="fa fa-file-archive-o" aria-hidden="true"></i>

Catatan Font Awesome

Kode produksi artikel ini tidak memuat ulang library Font Awesome. Pastikan template Blogger yang digunakan sudah memiliki Font Awesome jika ingin menampilkan icon.

Generator Tombol Download

Supaya lebih praktis, gunakan generator berikut. Masukkan URL file, teks tombol dan pilih desain yang ingin digunakan. Generator akan menghasilkan HTML tombol siap copy.

URL Download

Teks Tombol

Desain Shine Button Capsule Button

Buka pada tab baru

Troubleshooting

Tombol tidak berada di tengah

Pastikan HTML tombol tetap berada di dalam wrapper cfDlPreview atau cfDlCapsuleWrap.

Icon download tidak muncul

Periksa apakah template sudah memuat Font Awesome. Jika tidak ingin menggunakan icon, elemen <i> dapat dihapus.

File malah terbuka di browser

Hal tersebut dapat terjadi tergantung tipe file dan konfigurasi server. Atribut download tidak selalu dapat memaksa download untuk file lintas domain.

Animasi tidak bergerak

Periksa apakah perangkat mengaktifkan pengaturan reduced motion. Kode ini sengaja menghormati pengaturan aksesibilitas prefers-reduced-motion.

Tombol terlalu lebar di mobile

Ukuran mobile dibatasi maksimal 280px. Nilai tersebut dapat diubah pada media query jika diperlukan.

Kedua tombol menggunakan HTML dan CSS standar sehingga dapat berjalan pada browser modern tanpa membutuhkan jQuery. JavaScript hanya digunakan oleh generator kode dan tidak diperlukan oleh tombol download itu sendiri.

Jika hanya ingin menggunakan desain tombolnya, Anda dapat menghapus seluruh bagian generator beserta script generator dan tombol tetap berfungsi normal.

CODEFLARE BLOGGER DEVELOPMENT Butuh Tombol atau Widget Blogger Custom?

CodeFlare menerima pembuatan widget Blogger, modifikasi template, perbaikan script dan komponen custom sesuai kebutuhan blog atau website.

Hubungi CodeFlare