Cara merubah warna button pada bootstrap

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.

Tombol (button) dapat kita buat denga mudah menggunakan html, tag-nya adalah … . 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.

Baca juga:

1. Pengenalan Bootstrap
2. Cara Menggunakan Bootstrap

Kita perlu style css (Cascading Style Sheets) untuk mendesain tombol/button yang dibuat. Banyak sekali tutorial diinternet untuk membuat dengan css. Namun pada pembahasan kali ini kita akan fokus membuat tombol dengan bootstrap dan bukan css native.

Daftar Isi

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

 

  



Primary
Secondary
Success
Info
Warning
Danger
Dark
Light
 

 

Tag html yang bisa menggunakan class button bootstrap

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

#1 Tag

Untuk menggunakan pada tag

dengan menggunakan atribut class kemudian isi atribut class dengan contoh value “btn btn-info”.

Button

#2 Tag

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

#3 Tag

Pada tag 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.

Link Button

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

 

  



Besar
Normal
Kecil
 

 

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

 Tombol Penuh 

Menggunakan btn-block

 Tombol Penuh 

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.

Tombol
Tombol Aktif
Tombol Nonaktif

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.

Baca juga:

1. Membuat tabel di bootstrap
2. Menampilkan gambar di bootstrap

Sementara tombol dengan menggunakan class disabled, tombol tersebut akan berada pada kondisi tidak dapat diklik dengan warna yang cenderung pucat jika dibandingkan dengan tombol normal.

Membuat Efek Tombol Spinner

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

Loading.. Loading.. Loading..

Kesimpulan

Dengan menggunakan class btn pada bootstrap kita dapat membuat berbagai macam jenis button dengan implementasi pada tag , dan . untuk mengatur ukuran dan memberikan atribut aktif atau disabled juga dapat dilakukan dengan bootstrap. Begitu juga dengan efek spinner untuk memberikan efek loading pada tombol bootstrap.

Apa warna dari tombol dengan CSS Success pada bootstrap?

btn-success merupakan class bootstrap untuk membuat tombol berwarna hijau.

Kelas apa yang digunakan dalam bootstrap untuk membuat tombol menjadi lebih besar?

untuk mengubah ukuran tombol, bootstrap telah menyediakan class khusus. Untuk membuat tombol yang berukuran kecil, gunakan class .btn-sm. Untuk membuat tombol yang berukuran besar dengan bootstrap, gunakan class .btn-lg.

Apa nama class yang dapat kita gunakan untuk mengubah warna background menjadi warna utama pada bootstrap 5?

Terdapat 10 class untuk mengubah warna background di Bootstrap 5:.

.bg-primary..

.bg-secondary..

.bg-success..

.bg-danger..

.bg-warning..

.bg-info..

.bg-light..

.bg-dark..