Cara Buat Button dengan Timer Hitung Mundur dan Icon SVG
Dalam dunia web development, elemen interaktif seperti button dengan animasi menarik dapat meningkatkan konversi dan engagement pengunjung. Pada artikel ini, kami dari CheatWeb akan memandu Anda membuat button countdown premium dengan efek neon, shimmer, dan gradient animation yang eye-catching.
Button ini cocok digunakan untuk halaman safelink, tombol order, landing page dengan penawaran terbatas, atau promo eksklusif dengan timer.
Fitur Unggulan Button Ini
Sebelum kita masuk ke kode, berikut adalah beberapa fitur yang akan Anda dapatkan:
Countdown Timer: Timer mundur otomatis sebelum button muncul.
Neon Glow Effect: Border animasi dengan efek cahaya biru-pink.
Gradient Animation: Background gradient bergerak otomatis.
Shimmer Effect: Efek kilauan melintas di atas button.
Responsive: Ukuran kompak, cocok untuk mobile dan desktop.
Kode Lengkap (HTML, CSS, JavaScript)
Salin seluruh kode di bawah ini dan tempelkan di halaman HTML atau widget Blogger Anda. Kode ini sudah disatukan agar mudah digunakan. Perhatikan bahwa semua tag HTML di dalam kotak kode di bawah ini telah di-escape agar aman ditampilkan.
<!-- === COUNTDOWN BUTTON PREMIUM BY CHEATWEB === -->
<style type="text/css">
#order-wrapper-xyz{display:inline-block;position:relative;margin:20px auto;font-family:Arial,Helvetica,sans-serif;line-height:1.2;text-align:center}
#countdown-xyz{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:12px;font-weight:700;padding:8px 20px;border-radius:3px;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(45deg,#001a33,#0066cc,#00BFFF,#FF1493,#FF69B4,#00BFFF,#0066cc,#001a33);background-size:500%;animation:bg-move-xyz 6s linear infinite;text-shadow:0 1px 1px rgba(0,0,0,.3);cursor:wait}
#countdown-xyz .icon-timer-xyz{width:14px;height:14px;fill:#FFD700;filter:drop-shadow(0 0 5px #FFD700) drop-shadow(0 0 10px #00BFFF);animation:star-pulse-xyz 1.5s ease-in-out infinite}
#countdown-xyz .timer-number-xyz{color:#fff!important;font-size:16px;font-weight:700;margin:0 3px;text-shadow:0 0 8px rgba(255,255,255,.6)!important;animation:pulse-timer-xyz 1s ease-in-out infinite;display:inline-block;min-width:25px;text-align:center;background:rgba(0,0,0,.4);padding:2px 8px;border-radius:3px;border:1px solid #00BFFF}
#order-wrapper-xyz .order-link-xyz{display:none;position:relative;color:#fff;font-size:15px;font-weight:700;padding:12px 28px;border:none;border-radius:3px;cursor:pointer;text-transform:uppercase;letter-spacing:1.2px;overflow:hidden;text-decoration:none!important;background:linear-gradient(45deg,#001a33,#0066cc,#00BFFF,#FF1493,#FF69B4,#00BFFF,#0066cc,#001a33);background-size:500%;animation:bg-move-xyz 6s linear infinite,pulse-xyz 3s ease-in-out infinite;transition:all .3s ease;z-index:1}
#order-wrapper-xyz .order-link-xyz:hover{transform:scale(1.05) translateY(-3px);text-shadow:0 0 10px rgba(255,255,255,.5);box-shadow:0 10px 40px rgba(0,102,204,.6),0 0 60px rgba(255,105,180,.5),0 0 80px rgba(0,191,255,.4)}
#order-wrapper-xyz .order-link-xyz::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.1);z-index:1}
#order-wrapper-xyz .neon-xyz{position:absolute;inset:0;border-radius:3px;padding:2px;background:linear-gradient(45deg,#00BFFF,#FF1493,#00BFFF,#FF1493,#00BFFF);background-size:400%;animation:neon-spin-xyz 4s linear infinite;z-index:0;filter:blur(1px);box-shadow:0 0 10px #0066cc,0 0 20px #FF1493,0 0 30px #0066cc}
#order-wrapper-xyz .shimmer-xyz{position:absolute;top:2px;left:-100%;width:60%;height:calc(100% - 4px);background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),rgba(255,105,180,.7),transparent);animation:shimmer-xyz 2s infinite;z-index:2;border-radius:2px;pointer-events:none}
#order-wrapper-xyz .text-xyz{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:7px;pointer-events:none}
#order-wrapper-xyz .icon-xyz{width:18px;height:18px;fill:#fff;display:inline-block;vertical-align:middle}
@keyframes bg-move-xyz{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes neon-spin-xyz{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes shimmer-xyz{0%{left:-100%}100%{left:100%}}
@keyframes pulse-xyz{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes pulse-timer-xyz{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.9}}
@keyframes star-pulse-xyz{0%,100%{transform:scale(1) rotate(0deg);opacity:1}50%{transform:scale(1.2) rotate(180deg);opacity:.8}}
</style>
<div id="order-wrapper-xyz">
<div id="countdown-xyz">
<svg class="icon-timer-xyz" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
TUNGGU <span class="timer-number-xyz" id="wc-timer">10</span> DETIK
</div>
<a class="order-link-xyz wc-auto-safe" href="https://webstore.playcheatz.web.id/" rel="nofollow noopener noreferrer" target="_blank">
<div class="neon-xyz"></div>
<div class="shimmer-xyz"></div>
<span class="text-xyz">
<svg class="icon-xyz" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"></path></svg>
ORDER SEKARANG
</span>
</a>
</div>
<script>
(function(){var t=document.getElementById('wc-timer'),c=document.getElementById('countdown-xyz'),b=document.querySelector('.order-link-xyz'),s=10;if(!t||!b)return;var i=setInterval(function(){s--;t.textContent=s;if(s<=0){clearInterval(i);if(c)c.style.display='none';b.style.display='inline-flex';var sh=b.querySelector('.shimmer-xyz');if(sh){sh.style.animation='none';sh.offsetHeight;sh.style.animation='shimmer-xyz 2s infinite'}}},1000)})();
</script>
<!-- Credit: https://www.cheatweb.com -->
Penjelasan Komponen Kode
Kode di atas terdiri dari tiga bagian utama yang bekerja saling melengkapi:
1. CSS (Style)
Bagian CSS berada di dalam tag <style></style>. Ini mengatur tampilan visual seperti warna, animasi gradient, efek neon, dan posisi elemen. Semua styling ditulis dalam format CSS murni tanpa library eksternal.
2. HTML (Structure)
Bagian HTML berada di dalam <div id="order-wrapper-xyz"></div>. Ini adalah struktur tombol dan timer yang akan dilihat oleh pengunjung website Anda. Termasuk di dalamnya SVG icon untuk tampilan yang lebih tajam.
3. JavaScript (Logic)
Bagian JavaScript berada di dalam tag <script></script>. Script ini berfungsi untuk menjalankan hitungan mundur. Setiap 1 detik, angka akan berkurang hingga nol, kemudian menyembunyikan timer dan memunculkan tombol order.
Panduan Kustomisasi
Anda dapat menyesuaikan button ini agar sesuai dengan branding website Anda. Berikut adalah beberapa hal yang bisa diubah:
1. Mengganti URL Tujuan
Cari atribut href pada tag <a> dan ganti dengan link Anda:
href="https://webstore.playcheatz.web.id/"
2. Mengubah Durasi Timer
Pada bagian JavaScript, ubah nilai variabel s=10 menjadi angka yang diinginkan (dalam detik):
var s=10; // Ubah menjadi 15 untuk 15 detik
3. Mengganti Teks Bahasa
Anda bisa mengubah teks "TUNGGU ... DETIK" atau "ORDER SEKARANG" langsung di bagian HTML sesuai kebutuhan.
4. Mengubah Skema Warna
Untuk mengganti warna tema, edit kode linear-gradient pada CSS. Misalnya untuk tema merah:
background: linear-gradient(45deg, #1a0000, #cc0000, #ff3333);
Struktur Tag yang Digunakan
Berikut adalah daftar tag HTML yang digunakan dalam kode ini:
<style></style> - Untuk menampung CSS
<div></div> - Container utama dan elemen child
<span></span> - Untuk teks timer dan button
<a></a> - Link tombol order
<svg></svg> - Icon vektor untuk timer dan cart
<script></script> - Untuk JavaScript countdown
<!-- --> - Komentar HTML
Tips Optimasi
Gunakan button ini di tempat strategis seperti atas fold agar langsung terlihat oleh pengunjung. Pastikan juga Anda melakukan testing di berbagai perangkat mobile untuk memastikan animasi berjalan lancar.
Jika Anda menggunakan Blogger, pastikan menyalin kode ini dalam mode HTML View, bukan Compose View, agar kode tidak rusak secara otomatis.
Untuk performa terbaik, pastikan kode CSS dan JavaScript tidak konflik dengan tema yang sudah ada di website Anda.
Lisensi & Kredit
Kode ini dikembangkan dengan inspirasi dari komunitas web developer. Silakan gunakan untuk proyek pribadi maupun komersial dengan menyertakan kredit kepada CheatWeb.
<!-- Credit: https://www.cheatweb.com -->
Menghargai karya orang lain adalah bagian dari etika developer. Jangan hapus atribusi kredit jika Anda menggunakan versi original dari sumber terbuka.
Penutup
Button countdown animasi ini adalah solusi praktis untuk meningkatkan engagement tanpa perlu library berat. Dengan CSS murni dan JavaScript ringan, performa website Anda tetap optimal sambil memberikan pengalaman visual yang memukau.
Selamat mencoba! Jika ada pertanyaan, silakan tinggalkan komentar di bawah artikel ini.
— Tim CheatWeb
Gabung dalam percakapan