Cara merubah warna button pada bootstrap

Question

Halo sahabat programmer kali ini akan kita bahas mengenai cara membuat tombol (buttons) dengan menggunakan framework css bootstrap. Seperti kita ketahui penggunaan button akan sering kita jumpai saat membuat website. Button juga ibarat komponen wajib yang harus digunakan misalnya pada submit form, atau saat login dan lain-lain.

Table of Contents Show

Mengenal Jenis-jenis tombol bootstrap
Tag html yang bisa menggunakan class button bootstrap
#1 Tag <button>
#2 Tag <input>
#3 Tag <a>
Mengatur ukuran tombol (button)
Membuat full button dengan button block
Mengaktifkan dan Menonaktifkan tombol pada bootstrap
Membuat Efek Tombol Spinner
Apa warna dari tombol dengan CSS Success pada bootstrap?
Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?
Apa nama class yang dapat kita gunakan untuk mengubah warna background menjadi warna utama pada bootstrap 5?

Tombol (button) dapat kita buat denga mudah menggunakan html, tag-nya adalah <button>… </button>. Namun bila hanya menggunakan html rasanya masih ada yang kurang. Apa yang kurang ? jalas tampilannya stylenya tidak ada, sehingga tombol yang ditampilkan terlihat sangat jelek di browser.

Mengenal Jenis-jenis tombol bootstrap

Bootstrap menyediakan berbagai macam jenis tombol yang dapat kita gunakan. Misalnya tombol primary, default, info,warning, danger dan lainnya. Tombo-tombol tersebut mempunyai fungsi masing-masing dan saya sarankan untuk menggunakan sesuai kebutuhan elemen yang akan kita buat. Berikut ini adalah jenis-jenis tombol di bootstrap

Jenis StylePemanggilan ClassBasicbtnPrimarybtn btn-primarySecondarybtn btn-secondarySuccessbtn btn-successInfobtn btn-infoWarningbtn btn-warningDangerbtn btn-dangerDarkbtn btn-darkLightbtn btn-lightLinkbtn btn-link

Selain jenis-jenis tombol diatas terdapat satu jenis tombol lagi pada bootstrap yaitu button outline. Jenis button ini akan membuat efek garis pada button. Berbeda dengan jenis tombol default dari bootstrap yang pengisian warna penuh pada tombol. Pada tombol outline hanya berbentuk gatis saja pada button, dan ketika button tersebut di lewati oleh cursor maka warna tombol akan full/penuh. Berikut ini adalah contohnya

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  
</head>
<body>
<div class='container'>
<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>
 </div>
</body>
</html>

Tag html yang bisa menggunakan class button bootstrap

Selain tag <button> di html masih terdapat tag lain yang bisa menggunakan class button dari bootstrap ini.

#1 Tag <button>

Untuk menggunakan pada tag <button> dengan menggunakan atribut class kemudian isi atribut class dengan contoh value “btn btn-info”.

<button type="button" class="btn btn-info">Button</button>

#2 Tag <input>

Pada tag <input> kita bisa menggunakan tombol bootstrap dengan dua tipe input yaitu tipe button dan submit. pemanggilannya pun tetap menggunakan atribut class.

<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

#3 Tag <a>

Pada tag <a> biasanya kita membuat link baik bentuk teks maupun gambar. Namun dengan bootstrap kita dapat membuat link dengan bentuk tombol (button). Caranya cukup menggunakan atribut class dan isi nilai atibut tersebut dengan class button yang ingin kita gunakan. Contoh dibawah ini saya membuat link dengan bentuk button info menggunakan bootstrap.

<a href="#" class="btn btn-info" role="button">Link Button</a>

Mengatur ukuran tombol (button)

Bootstrap menyediakan 3 jenis ukuran tombol. Ukuran yang secara umum dipakai adalah default namun terdapat dua ukuran lainnya yaitu small (kecil) dan large (besar).

UkuranClassKecilbtn-smNormal (default)btnBesarbtn-lg

Contoh

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class='container'>
<button type="button" class="btn btn-info btn-lg">Besar</button>
<button type="button" class="btn btn-info">Normal</button>
<button type="button" class="btn btn-info btn-sm">Kecil</button>
 </div>
</body>
</html>

Membuat full button dengan button block

Untuk membuat tombol penuh yang akan memenuhi container halaman web kita menggunakan class btn-block pada pemanggilan class button botstrap. Berikut ini adalah contohnya

Tidak menggunakan btn-block

 <button type="button" class="btn btn-primaryk">Tombol Penuh</button>

Menggunakan btn-block

 <button type="button" class="btn btn-primary btn-block">Tombol Penuh</button>

Mengaktifkan dan Menonaktifkan tombol pada bootstrap

Pada bootstrap kita dapat mengaktikan tombol dengan class active. Tombol yang aktif akan muncul di halaman web dengan keadaan yang sudah diklik. Sedangkan untuk menonaktifkan kita menggunakan class disabled. Tombol yang di disabled akan tetap tampil namun tidak dapat diklik.

<button type="button" class="btn btn-primary">Tombol</button>
<button type="button" class="btn btn-primary active">Tombol Aktif</button>
<button type="button" class="btn btn-primary disabled">Tombol Nonaktif</button>

Dari ketiga contoh tombol diatas, tombol yang pertama adalah tombol normal tanpa menggunakan class active atau disabled. Tombol tanpa menggunakan kedua class tersebut dapat di klik.

Sementara untuk tombol yang kedua menggunakan class active, dengan menggunakan class ini tombol akan berada pada kondisi sudah terklik. Sehingga dapat diperhatikan warna tombol sudah berubah jika dibandingkan warna tombol yang belum terklik.

Membuat Efek Tombol Spinner

Membuat efek spinner dengan bootstrap cukup dengan menambahkan tag <span> pada tag <button> dengan pemanggilan class spinner-border seperti pada contoh dibawah ini:

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