Tombol di Bootstrap 5
Bootstrap 5 menyediakan berbagai macam gaya tombol yang dapat digunakan untuk meningkatkan tampilan dan interaksi pengguna di halaman web. Tombol-tombol ini sangat mudah diterapkan hanya dengan menambahkan kelas pada elemen <button>, <a>, atau <input>.
📌 Dasar: Kelas .btn
Semua tombol di Bootstrap harus dimulai dengan kelas dasar .btn. Kemudian, kamu bisa menambahkan kelas warna untuk menentukan gaya visual tombol, seperti:
<button class="btn btn-primary">Primary</button><button class="btn btn-secondary">Secondary</button><button class="btn btn-success">Success</button><button class="btn btn-danger">Danger</button><button class="btn btn-warning">Warning</button><button class="btn btn-info">Info</button><button class="btn btn-light">Light</button><button class="btn btn-dark">Dark</button><button class="btn btn-link">Link</button>
🎨 Variasi Warna Tombol
Berikut daftar warna yang tersedia:
| Kelas | Warna Tombol |
|---|---|
btn-primary | Biru (utama) |
btn-secondary | Abu-abu gelap |
btn-success | Hijau |
btn-danger | Merah |
btn-warning | Kuning |
btn-info | Biru muda |
btn-light | Abu terang |
btn-dark | Hitam |
btn-link | Tanpa border, seperti link |
🧱 Outline Buttons
Bootstrap juga menyediakan versi outline (tanpa latar belakang solid), cukup ganti btn- menjadi btn-outline-:
<button class="btn btn-outline-primary">Primary</button><button class="btn btn-outline-success">Success</button><button class="btn btn-outline-danger">Danger</button>
📏 Ukuran Tombol
Gunakan kelas tambahan untuk mengubah ukuran tombol:
.btn-lg→ tombol besar.btn-sm→ tombol kecil
<button class="btn btn-primary btn-lg">Tombol Besar</button><button class="btn btn-secondary btn-sm">Tombol Kecil</button>
🧍 Tombol Blok (Full Width)
Gunakan d-grid dan gap-2 untuk membuat tombol selebar penuh (responsive):
<div class="d-grid gap-2"> <button class="btn btn-primary" type="button">Tombol Full Width</button></div>
Untuk ukuran tertentu (misal hanya di layar kecil):
<div class="d-grid gap-2 d-md-block"> <button class="btn btn-primary" type="button">Responsive</button></div>
♿ Tombol Nonaktif
Gunakan atribut disabled untuk membuat tombol tidak dapat diklik:
htmlCopyEdit<button class="btn btn-primary" disabled>Nonaktif</button>
Atau untuk elemen <a>:
<a class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link Nonaktif</a>
🧪 Contoh Lengkap
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contoh Tombol Bootstrap</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"></head><body class="p-4"> <h3>Tombol Standar</h3> <button class="btn btn-primary">Primary</button> <button class="btn btn-danger">Danger</button> <h3 class="mt-4">Outline</h3> <button class="btn btn-outline-success">Success</button> <h3 class="mt-4">Ukuran</h3> <button class="btn btn-info btn-sm">Kecil</button> <button class="btn btn-info btn-lg">Besar</button> <h3 class="mt-4">Full Width</h3> <div class="d-grid"> <button class="btn btn-dark">Full Width</button> </div></body></html>