Tutorial Button Keren

Deskripsi: Pelajari cara membuat tombol interaktif yang menarik dengan efek hover animasi yang smooth menggunakan CSS murni. Cocok untuk website, blog, atau toko online Anda.

📌 Pendahuluan

Tombol (button) adalah elemen penting dalam desain web. Tombol yang menarik dan responsif dapat meningkatkan user experience dan mendorong interaksi pengunjung. Dalam tutorial ini, kami akan membuat 3 varian tombol keren dengan efek hover yang smooth menggunakan CSS murni.

🎨 Pratinjau Langsung

Demo Click here

Download Click here

Buy Now Click here

💻 Kode Lengkap

Berikut adalah kode lengkap untuk membuat tombol-tombol keren di atas. Anda dapat menyalin dan mengguna langsung di website Anda.

index.html

<!-- Button Keren 1 - Demo (Biru) --> <button class="btn-keren1"> <span class="circle"> <svg viewBox="0 0 24 24"> <path fill="currentColor" d="M21,14H3V4H21M21,2H3C1.89,2..."/> </svg> </span> <span class="title">Demo</span> <span class="title-hover">Klik di sini</span> </button> <!-- Button Keren 2 - Download (Hijau) --> <button class="btn-keren2"> <span class="circle2"> <svg viewBox="0 0 24 24"> <path fill="currentColor" d="M5,20H19V18H5M19,9H15V3..."/> </svg> </span> <span class="title2">Download</span> <span class="title-hover2">Klik di sini</span> </button> <!-- Button Keren 3 - Beli Sekarang (Kuning) --> <button class="btn-keren3"> <span class="circle3"> <svg viewBox="0 0 24 24"> <path fill="currentColor" d="M17,18C15.89,18..."/> </svg> </span> <span class="title3">Beli Sekarang</span> <span class="title-hover3">Klik di sini</span> </button>
       

style.css

/* Button Keren 1 - Demo */ .btn-keren1 { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 12px 28px; border: 3px solid #3b82f6; background-color: transparent; font-size: 14px; font-weight: 600; color: #3b82f6; border-radius: 6px; text-decoration: none; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); overflow: hidden; cursor: pointer; } .btn-keren1 .circle { position: absolute; left: 0; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background-color: #3b82f6; border-radius: 50%; margin-left: 6px; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); } .btn-keren1:hover { background-color: #3b82f6; color: white; } .btn-keren1:hover .circle { width: calc(100% - 12px); border-radius: 6px; } /* Untuk Button 2, ganti #3b82f6 dengan #10b981 (Hijau) */ /* Untuk Button 3, ganti #3b82f6 dengan #f59e0b (Kuning) */
       

Preview Kode Lengkap

Lihat tombol di bagian Pratinjau Langsung di atas untuk melihat hasilnya. Copy kode HTML dan CSS, lalu paste ke file Anda.
       

✨ Fitur Tombol

🎯 Efek Hover Smooth

Animasi yang mulus dengan cubic-bezier untuk pengalaman pengguna yang lebih baik.

⚡ Performa Tinggi

Menggunakan CSS murni tanpa JavaScript, sehingga loading lebih cepat.

📱 Responsive

Bekerja sempurna di semua ukuran layar desktop hingga mobile.

🎨 Mudah Dikustomisasi

Warna, ukuran, dan efek dapat diubah dengan mudah sesuai kebutuhan.

💡 Tips Menggunakan Kode di Blogspot

📌 Cara Paste di Blogspot:

Login ke dashboard Blogger Anda
Edit posting atau buat posting baru
Klik menu "HTML"
Paste kode HTML di tempat yang diinginkan
Klik tab "Compose" kembali

⚠️ Penting untuk Blogspot: Jika CSS tidak muncul, tambahkan kode CSS di Dashboard Blogger → Tema → Edit HTML → cari tag </head> → paste CSS sebelum tag tersebut.

✅ Hasil Maksimal: Untuk hasil terbaik, gunakan tombol ini di area penting seperti CTA (Call To Action), download link, atau link produk.

🔧 Cara Mengustomisasi

1. Mengubah Warna

Ganti warna heksadesimal pada CSS:

Contoh Kode

/* Ganti #3b82f6 dengan warna yang diinginkan */ .btn-keren1 { border: 3px solid #FF5733; color: #FF5733; } .btn-keren1 .circle { background-color: #FF5733; }
      

2. Mengubah Ukuran

Atur padding dan font-size:

Contoh Kode

.btn-keren1 { padding: 16px 36px; /* Perbesar padding */ font-size: 16px; /* Perbesar font */ }
      

3. Mengubah Teks Tombol

Edit teks di antara tag <span class="title">...</span>

📋 Kesimpulan

Tombol keren dengan animasi CSS ini adalah solusi sempurna untuk meningkatkan interaktivitas website Anda. Mudah diimplementasikan, responsif, dan tidak membebani loading page. Selamat mencoba dan semoga hasilnya memuaskan!

❓ FAQ (Pertanyaan Umum)

Q: Apakah tombol ini kompatibel dengan semua browser?
A: Ya, kompatibel dengan Chrome, Firefox, Safari, dan browser modern lainnya.

Q: Bisakah saya mengubah ikon SVG?
A: Ya, Anda bisa mengganti path SVG dengan ikon lain dari font awesome atau material design.

Q: Bagaimana cara membuat tombol bekerja di Blogspot?
A: Tambahkan onclick handler atau buat tombol sebagai link dengan href ke halaman tujuan.

Agen Coding

Widget HTML #1