Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

Beranda / Coding / Panduan / Tutorial

Panduan Lengkap Membuat Tombol download dengan gaya berbeda yang bisa Anda gunakan

Posting Komentar

Berikut adalah dua contoh tombol download dengan gaya berbeda yang bisa Anda gunakan:

"satu menggunakan CSS murni untuk tampilan modern minimalis,"
"dan satu lagi menggunakan animasi JavaScript untuk efek interaktif saat diklik."

1. Tombol Download Modern (CSS Murni)

Tombol ini memiliki efek hover (saat kursor di atasnya) yang halus dengan bayangan dan perubahan warna gradasi yang keren. HTML:

SALIN
HTML 
<a href="link-file-anda.zip" class="btn-download" download>
  <span class="icon">⬇</span>
  <span class="text">Download Now</span>
</a>
SALIN
CSS 
.btn-download {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  font-weight: bold;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-download:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(110, 142, 251, 0.4);
  filter: brightness(1.1);
}

.icon { margin-right: 10px; font-size: 1.2rem; }

2. Tombol Animasi "Processing" (HTML, CSS, & JS)

Tombol ini akan berubah menjadi status "Downloading..." saat diklik, memberikan umpan balik visual yang interaktif kepada pengguna. HTML:

SALIN
HTML 
<button id="dl-button" class="anim-button">
  <span id="btn-text">Download File</span>
</button>
SALIN
CSS 
.anim-button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  min-width: 200px;
  transition: background 0.3s;
}

.anim-button.loading {
  background-color: #6c757d;
  cursor: not-allowed;
}
SALIN
JavaScript 
const btn = document.getElementById('dl-button');
const btnText = document.getElementById('btn-text');

btn.addEventListener('click', () => {
  // Tambah kelas loading
  btn.classList.add('loading');
  btnText.innerText = 'Downloading... ⏳';
  
  // Simulasi proses download selama 3 detik
  setTimeout(() => {
    btn.classList.remove('loading');
    btnText.innerText = '✅ Completed';
    btn.style.backgroundColor = '#007bff';
  }, 3000);
});

Terima Kasih Sudah Berkunjung!

Semoga artikel ini bermanfaat bagi Anda. Jangan ragu untuk meninggalkan komentar atau membagikan tulisan ini jika Anda menyukainya.

Posting Komentar untuk "Panduan Lengkap Membuat Tombol download dengan gaya berbeda yang bisa Anda gunakan"

Blog Subscription Banner
0%