Tombol Bootstrap 5

Gaya Tombol

Bootstrap 5 menyediakan berbagai gaya tombol:

Example

<button type="button" class="btn">Dasar</button>
<button type="button" class="btn btn-primary">Utama</button>
<button type="button" class="btn btn-secondary">Secundari</button>
<button type="button" class="btn btn-success">Berhasil</button>
<button type="button" class="btn btn-info">Informasi</button>
<button type="button" class="btn btn-warning">Peringatan</button>
<button type="button" class="btn btn-danger">Bahaya</button>
<button type="button" class="btn btn-dark">Warna Darah</button>
<button type="button" class="btn btn-light">Warna Ringan</button>
<button type="button" class="btn btn-link">Link</button>

Try It Yourself

Kelas tombol dapat digunakan untuk <a>、<button> atau <input> Elemen:

Example

<a href="#" class="btn btn-success"> Tombol Link</a>
<button type="button" class="btn btn-success"> Tombol</button>
<input type="button" class="btn btn-success" value=" Tombol Input">
<input type="submit" class="btn btn-success" value=" Tombol Submit">
<input type="reset" class="btn btn-success" value=" Tombol Reset">

Try It Yourself

Mengapa kami menulis # di atribut href tautan?

Karena kami tidak memiliki halaman yang dapat dihubungkan dan kami tidak ingin menerima pesan '404', jadi kami menggunakan # sebagai tautan. Dalam kehidupan nyata, itu akan menjadi URL yang nyata halaman 'Cari'.

Kontur Tombol

Bootstrap 5 juga menyediakan delapan tombol kontur/tebal.

Pindahkan mouse ke atasnya, untuk melihat efek 'hover' ekstra：

Example

<button type="button" class="btn btn-outline-primary">Utama</button>
<button type="button" class="btn btn-outline-secondary">Secundari</button>
<button type="button" class="btn btn-outline-success">Berhasil</button>
<button type="button" class="btn btn-outline-info">Informasi</button>
<button type="button" class="btn btn-outline-warning">Peringatan</button>
<button type="button" class="btn btn-outline-danger">Bahaya</button>
<button type="button" class="btn btn-outline-dark">Terang</button>
<button type="button" class="btn btn-outline-light text-dark">Gelap</button>

Try It Yourself

Ukuran Tombol

diperuntukkan untuk tombol besar .btn-lg Kelas, digunakan untuk tombol kecil .btn-sm Kelas：

Example

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

Try It Yourself

Tombol Blok

Untuk membuat tombol blok yang menutupi seluruh lebar elemen induk, gunakan .d-grid "helper" 类：

Example

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
</div>

Try It Yourself

If you have many block-level buttons, you can use .gap-* The class controls the spacing between them:

Example

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
  <button type="button" class="btn btn-primary btn-block">Full Width Button</button>
</div>

Try It Yourself

Active/Disabled Button

Buttons can be set to active (displayed as pressed) or disabled (unclickable) state:

class .active to make the button display as pressed, and disabled The attribute makes the button unclickable. Note that the <a> element does not support the disabled attribute, so you must use .disabled The class makes it visually display as disabled.

Example

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Try It Yourself

Loader Button

You can also add "spinner" to the button, and you will learn more about our BS5 Spinner tutorial:

Example

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Loading..
</button>

Try It Yourself