Button merupakan salah satu komponen penting untuk sebuah website. Button ini berisi link untuk mengakses halaman lain, selain itu button dapat membuat tampilan website semakin keren. Baiklah langsung saja berikut pembahasan cara membuat button Bootstrap 4.
Button Style
Boostrap menyediakan berbagai style atau warna untuk mempercantik web Anda, penulisan dasarnya yaitu dengan menambahkan class btn.<button type="button" class="btn">Basic</button>
Untuk warna yang membedakan adalah penulisan classnya yaitu menambahkan class btn-[kode warna], berikut penulisan button style pada bootstrap 4.
<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>
Outline Button
Tombol outline merupakan tombol yang memiliki warna dasar putih dengan perbedaan pada warna border yang digunakan. Untuk penulisan class nya adalah btn-outline-[kode warna].<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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Button Size
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Normal button button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
Block Button
Block button berfungsi untuk membuat button dengan ukuran sesuai dengan lebar atau width halaman. Silahkan tambahkan class btn-block untuk membuat block button.<button type="button" class="btn btn-primary btn-block">Block level button</button>
Button Tag
Selain dapat digunakan pada elemen <button>, class btn juga bisa digunakan pada elemen <a> dan <input>. Berikut contoh penulisannya.<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
Active dan Disable Button
Anda bisa menambahkan class active agar button terlihat seperti ditekan. Untuk disable button silahkan tambah artibut disable pada <button> yang membuat button tidak bisa diklik. Perlu diketahui bahwa artibut disable tidak bisa digunakan pada elemen <a> dan harus menggunakan class disable.<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
Button Group
Dengan Bootstrap 4 Anda bisa mengelompokkan button pada satu baris dengan membuat elemen <div> dan menambahkan class btn-group. Berikut penulisan button group.Dan untuk mengubah ukuran silahkan gunakan class btn-group-lg untuk membuat button groups berukuran besar dan class btn-group-sm untuk button group berukuran kecil.
<div class="btn-group">
<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>
</div>
Vertical Button Group
Selain itu Anda juga bisa button group dengan posisi vertikal dari atas ke bawah dengan menggunakan class btn-group-vertikal pada element <div>. Berikut contoh penulisannya.<div class="btn-group-vertical">
<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>
</div>