Tombol adalah elemen interaktif paling dasar di setiap website atau aplikasi. Bootstrap menyediakan serangkaian kelas yang kuat dan fleksibel untuk membuat tombol yang tidak hanya terlihat bagus tetapi juga konsisten dan responsif. Dengan beberapa kelas sederhana, Anda bisa mengubah elemen standar menjadi tombol yang menarik. 🔳

## Tombol Dasar dan Pilihan Warna

Untuk membuat tombol, Anda hanya perlu menambahkan kelas dasar .btn ke elemen <a>, <button>, atau <input>. Setelah itu, tambahkan kelas warna kontekstual untuk memberikan gaya visual.

Bootstrap menyediakan beberapa pilihan warna standar yang memiliki makna tertentu:

• .btn-primary: Untuk aksi utama.
• .btn-secondary: Untuk aksi sekunder.
• .btn-success: Menandakan aksi yang berhasil atau positif.
• .btn-danger: Menandakan aksi yang berbahaya atau negatif.
• .btn-warning: Menandakan peringatan.
• .btn-info: Untuk aksi informasional.
• .btn-light: Tombol berwarna terang.
• .btn-dark: Tombol berwarna gelap.
• .btn-link: Membuat tombol terlihat seperti tautan biasa.

Contoh Kode:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

## Tombol Outline (Garis Tepi)

Jika Anda menginginkan tombol dengan latar belakang transparan dan hanya garis tepi berwarna, gunakan kelas .btn-outline-*. Tombol ini akan memiliki efek hover yang mengisi warna saat kursor diarahkan.

Contoh Kode:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>

## Mengubah Ukuran Tombol

Bootstrap memudahkan Anda untuk mengubah ukuran tombol. Cukup tambahkan kelas .btn-lg untuk tombol besar atau .btn-sm untuk tombol kecil.

Contoh Kode:

<button type="button" class="btn btn-primary btn-lg">Tombol Besar</button>
<button type="button" class="btn btn-secondary btn-sm">Tombol Kecil</button>

## Tombol Lebar Penuh (Block Button)

Untuk membuat tombol memenuhi seluruh lebar wadahnya, Anda bisa menggunakan beberapa pendekatan, seperti membungkusnya dalam <div> dengan kelas .d-grid.

Contoh Kode:

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Tombol Blok</button>
  <button class="btn btn-success" type="button">Tombol Blok Lain</button>
</div>

Ini sangat berguna untuk tombol pada tampilan mobile atau di dalam card.

## Status Nonaktif (Disabled)

Untuk menonaktifkan tombol, tambahkan atribut disabled pada elemen <button>. Untuk elemen <a>, Anda bisa menambahkan kelas .disabled. Tombol yang dinonaktifkan akan terlihat lebih pudar dan tidak akan merespons klik.

Contoh Kode:

<button type="button" class="btn btn-primary" disabled>Tombol Nonaktif</button>
<a href="#" class="btn btn-danger disabled" tabindex="-1" aria-disabled="true">Tautan Nonaktif</a>

Kesimpulan

Membuat tombol dengan Bootstrap sangatlah efisien. Dengan kombinasi kelas .btn, kelas warna, ukuran, dan status, Anda dapat dengan cepat menciptakan tombol yang konsisten dan menarik secara visual untuk berbagai keperluan dalam proyek web Anda.