Tombol dan link adalah elemen interaktif paling fundamental dalam sebuah website. Bootstrap mengubah tampilan standar elemen ini menjadi tombol modern yang menarik dan konsisten di berbagai browser. Dengan utility class yang disediakan, kustomisasi tombol menjadi sangat mudah dan cepat.

Kelas Tombol Dasar

Untuk membuat tombol di Bootstrap, Anda perlu menambahkan class dasar .btn ke elemen <button>, <a>, atau <input>. Setelah itu, tambahkan class modifier untuk menentukan warnanya.

Bootstrap menyediakan beberapa pilihan warna kontekstual:

• .btn-primary: Warna utama (biasanya biru), untuk aksi primer.
• .btn-secondary: Warna sekunder (abu-abu), untuk aksi alternatif.
• .btn-success: Warna hijau, untuk aksi yang berhasil atau positif.
• .btn-danger: Warna merah, untuk aksi yang berbahaya atau negatif.
• .btn-warning: Warna kuning, untuk peringatan.
• .btn-info: Warna biru muda, untuk aksi informasional.
• .btn-light: Tombol dengan latar belakang terang.
• .btn-dark: Tombol dengan latar belakang gelap.
• .btn-link: Membuat tombol terlihat seperti link biasa, namun tetap memiliki properti tombol.

Berikut adalah contoh kodenya:

<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>

Menggunakan Tag <a> sebagai Tombol

Salah satu keunggulan Bootstrap adalah Anda bisa membuat tag link (<a>) terlihat persis seperti tombol. Ini sangat berguna untuk navigasi yang ingin Anda tonjolkan. Cukup tambahkan class .btn yang sama pada tag <a>.

Penting: Saat menggunakan <a> untuk fungsionalitas di dalam halaman (bukan untuk navigasi ke halaman lain), disarankan untuk menambahkan role="button" untuk membantu aksesibilitas bagi pengguna screen reader.

<a class="btn btn-primary" href="#" role="button">Link jadi Tombol</a>

Tombol Outline

Jika Anda menginginkan tombol dengan gaya transparan (hanya border yang berwarna), gunakan class .btn-outline-*. Warna tombol baru akan terisi saat kursor (hover) diarahkan ke atasnya.

<button type="button" class="btn btn-outline-primary">Primary Outline</button>
<button type="button" class="btn btn-outline-success">Success Outline</button>
<button type="button" class="btn btn-outline-dark">Dark Outline</button>

Ukuran Tombol

Bootstrap menyediakan class untuk mengubah ukuran tombol dengan cepat.

• .btn-lg: Untuk tombol yang lebih besar.
• .btn-sm: Untuk tombol yang lebih kecil.

Jika tidak ada class ukuran yang ditambahkan, tombol akan menggunakan ukuran standar (medium).

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

[Image showing large, standard, and small Bootstrap buttons]

Tombol Lebar Penuh (Block Buttons)

Untuk membuat tombol membentang selebar elemen induknya, bungkus tombol tersebut dengan <div> yang memiliki class .d-grid. Anda juga bisa menambahkan .gap-2 untuk memberi jarak jika ada lebih dari satu tombol.

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

Status Tombol

Anda bisa membuat tombol terlihat aktif atau nonaktif.

• Status Aktif: Tambahkan class .active untuk membuat tombol seolah-olah sedang ditekan.
• Status Nonaktif: Tambahkan atribut disabled pada elemen <button> atau class .disabled pada elemen <a>. Tombol yang nonaktif tidak akan bisa diklik dan warnanya akan lebih pudar.

<button type="button" class="btn btn-primary active">Tombol Aktif</button>
<button type="button" class="btn btn-secondary" disabled>Tombol Nonaktif</button>
<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button">Link Nonaktif</a>

Dengan menguasai berbagai class untuk tombol ini, Anda dapat membangun antarmuka pengguna yang interaktif dan menarik secara visual dengan sangat efisien menggunakan Bootstrap. Selamat mencoba! 🚀