Membuat Tombol (Button) dengan Bootstrap

Ditulis Oleh:
membuat tombol (button) 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 <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.

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.

Mengenal Jenis-jenis tombol bootstrap

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 Class
Basicbtn
Primarybtn btn-primary
Secondarybtn btn-secondary
Successbtn btn-success
Infobtn btn-info
Warningbtn btn-warning
Dangerbtn btn-danger
Darkbtn btn-dark
Lightbtn btn-light
Linkbtn 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> 
jenis tombol outline pada bootstrap

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

UkuranClass
Kecilbtn-sm
Normal (default)btn
Besarbtn-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> 
mengatur ukuran tombol

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

Menggunakan btn-block

 <button type="button" class="btn btn-primary btn-block">Tombol Penuh</button> 
tombol penuh (btn-block)

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>
tombol aktif dan disabled

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 <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>
efek spinner tombol bootstrap

Kesimpulan

Dengan menggunakan class btn pada bootstrap kita dapat membuat berbagai macam jenis button dengan implementasi pada tag <button>, <input> dan <a>. 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.

Setiawan Dimas

Penulis di Kelasprogrammer.com, Senang dengan dunia programming khusus web development. Lulusan Sarjana Teknik Informatika STMIK Akakom Yogyakarta. Ingin berfokus pada Pemrograman web dan Internet Marketing.
Setiawan Dimas

Latest posts by Setiawan Dimas (see all)