Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 12 : Cara Membuat Input Grup di Bootstrap, selanutnya kita akan belajar cara membuat tombol di Bootstrap.

Tombol adalah bagian penting dari web dan aplikasi. Tombol digunakan untuk berbagai tujuan seperti, mengirimkan atau mengatur ulang formulir HTML.

Melakukan tindakan interaktif seperti menampilkan atau menyembunyikan sesuatu di halaman web dengan mengklik tombol, mengarahkan pengguna ke halaman lain, dan sebagainya.

Bootstrap menyediakan cara cepat dan mudah untuk membuat dan menyesuaikan tombol.

Style Tombol Bootstrap

Class yang berbeda tersedia di Bootstrap untuk menata tombol serta untuk menunjukkan status atau semantik yang berbeda.

Style tombol dapat diterapkan ke elemen apa pun.

Namun, tombol biasanya diterapkan secara normal ke elemen <a>, <input>, dan <button> untuk rendering terbaik.

Contoh berikut akan menunjukkan kepada Anda cara membuat style tombol yang berbeda di Bootstrap:

<div class="bs-example">
    <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-dark">Dark</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-link">Link</button>
</div>

Tombol Outline Bootstrap

Anda juga dapat membuat tombol outline dengan mengganti class pengubah tombol, seperti ini:

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

Mengubah Ukuran Tombol

Bootstrap memberi Anda pilihan lebih lanjut untuk menskalakan tombol ke atas atau ke bawah. Anda dapat memperbesar atau memperkecil tombol dengan menambahkan class ekstra .btn-lg atau .btn-sm, seperti ini:

<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg">Tombol Besar</button>
    <button type="button" class="btn btn-secondary btn-lg">Tombol Besar</button>
    <hr>
    <button type="button" class="btn btn-primary">Tombol Default</button>
    <button type="button" class="btn btn-secondary">Tombol Default</button>
    <hr>
    <button type="button" class="btn btn-primary btn-sm">Tombol Kecil</button>
    <button type="button" class="btn btn-secondary btn-sm">Tombol Kecil</button>
</div>

Anda juga dapat membuat tombol level blok (tombol yang menutupi lebar penuh elemen induk) dengan menambahkan class ekstra .btn-block ke tombol, seperti ini:

<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg btn-block">Tombol block level</button>
    <button type="button" class="btn btn-secondary btn-lg btn-block">Tombol block level</button>
</div>

Tombol Nonaktif Bootstrap

Terkadang kami perlu menonaktifkan tombol karena alasan tertentu, misalnya, pengguna jika tidak memenuhi syarat untuk melakukan tindakan khusus.

Atau kita ingin memastikan bahwa pengguna harus melakukan semua tindakan lain yang diperlukan sebelum melanjutkan ke tindakan khusus.

Mari kita lihat bagaimana melakukannya.

Membuat Tombol yang Dinonaktifkan Menggunakan Tombol dan Elemen Input

Tombol yang dibuat melalui tag <button> atau <input> dapat dinonaktifkan dengan menambahkan atribut nonaktif ke masing-masing elemen, seperti yang ditunjukkan pada contoh berikut:

<div class="bs-example">
    <button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
    <button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</div>

Membuat Tombol Disabled Menggunakan Elemen Anchor

Tombol yang dibuat melalui tag <a> dapat dinonaktifkan dengan menambahkan class .disabled, seperti ini:

<div class="bs-example">
    <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg disabled">Link</a>
</div>

Catatan: Class .disabled hanya membuat tautan tampak seperti dinonaktifkan secara visual, namun tautan tersebut akan tetap dapat diklik kecuali Anda menghapus atribut href darinya.

Cara lainnya, Anda dapat menerapkan JavaScript khusus untuk mencegah klik tersebut.

Tombol Aktif Bootstrap

Selain itu, Anda juga dapat menerapkan class .active untuk memaksa tombol terlihat seperti aktif (yaitu ditekan).

Biasanya Anda tidak perlu menambahkan class ini ke tombol, karena status aktifnya secara otomatis ditata oleh Bootstrap menggunakan CSS :active pseudo-class. Berikut contohnya:

<div class="bs-example">
    <a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
    <a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
</div>

Membuat Tombol Spinner

Dengan Bootstrap Anda dapat dengan mudah memasukkan ikon spinner di tombol untuk menunjukkan status pemuatan dalam aplikasi Anda.

Lihat contoh berikut untuk melihat cara kerjanya:

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

Semoga tutorial ini membantu Anda untuk belajar cara membuat tombol di Bootstrap.