Belajar Membuat Tombol di Bootstrap 4

Pada Bootstrap 4, kita dapat membuat Tombol dengan Style yang berbeda. Berikut adalah contohnya:

Style Tombol

<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</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> 

Lihat kode di Github | Lihat Live Demo

Kita dapat meletakkan class .button pada elemen <a>, <button>, atau <input>. Contoh:

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

Lihat kode di Github | Lihat Live Demo

Mengapa menggunakan simbol Hastag "#" pada atribut Link?
Jika kita tidak memiliki halaman yang ingin diletakkan pada Link tersebut dan kita tidak ingin mendapatkan pesan 404 pada halaman Website, kita bisa menggunakan simbol Hastag "#" sebagai Link.


Tombol Outline

Pada Bootstrap 4, kita juga dapat membuat Tombol dengan Style Outline/Bordered. Berikut adalah contohnya:

 Tombol Outline

<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Lihat kode di Github | Lihat Live Demo

Ukuran Tombol

Kita bisa menggunakan class .btn-lg untuk membuat tombol yang besar atau class .btn-sm untuk membuat tombol yang berukuran kecil. Berikut adalah contohnya:

Ukuran Tombol

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

Lihat kode di Github | Lihat Live Demo

Tombol Block

Untuk membuat tombol Block Level yang berfungsi untuk membuat lebar dari tombol tersebut mengikuti ukuran Parent, kita dapat menggunakan class .btn-block. Berikut adalah contohnya:

Tombol Block

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

Lihat kode di Github | Lihat Live Demo

Tombol Aktif/Nonaktif

Kita dapat mengatur tombol menjdai Aktif (Dapat Ditekan/Diklik) atau Nonaktif/Disabled (Tidak dapat Ditekan/Diklik). Berikut adalah contohnya:

Tombol Aktif/Nonaktif

Untuk membuatnya, kita bisa menggunakan class .active untuk membuat tombol menjadi aktif dan atribut disabled untuk membuat tombol menjadi nonaktif/disabled. Perlu diingat bahwa elemen <a> tidak mendukung atribut disabled. Maka dari itu, kita dapat menggunakan class .disabled untuk membuatnya menjadi nonaktif secara visual. Berikut adalah contohnya:

<button type="button" class="btn btn-primary">Primary Button</button>
<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>

Lihat kode di Github | Lihat Live Demo

Tombol Spinner/Loading

Kita juga dapat menambahkan spinner atau animasi Loading kedalam tombol (selebihnya akan kita bahas pada bagian selanjutnya). Berikut adalah contohnya:

Tombol Spinner/Loading

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

Lihat kode di Github | Lihat Live Demo

0 Komentar