Cara Membuat Button atau Tombol dengan Bootstrap

Hallo temen-teman kali ini kita akan melanjutkan tutorial bootstrap selanjutnya yaitu cara mudah membuat tombol / button dengan menggunakan bootstrap. Seperti kita jumpai tombol / button merupakan elemen yang penting pada sebuah pembuatan website maka dari itu dengan penempatan dan membuat tombol yang baik maka membbuat website kita menarik.

Mengenal jenis-jenis tombol bootstrap 

Bootstrap menyediakan beberapa class yang bisa kita gunakan untuk mendesain atau menciptakan bentuk tombol yang menarik.berikut ini beberapa class bootstrap yang bisa di gunakan untuk membuat tombol, mengatur ukuran dan mengatur warna. Berikut ini adalah jenis-jenis tombol di bootstrap.

JENIS STYLE	PEMANGGILAN CLASS
Basic	btn
Primary	btn btn-primary
Secondary	btn btn-secondary
Success	btn btn-success
Info	btn btn-info
Warning	btn btn-warning
Danger	btn btn-danger
Dark	btn btn-dark
Light	btn btn-light
Link	btn btn-link

• .btn
  btn merupakan class bootstrap yang bisa di gunakan untuk membuat tombol.
• .btn-primary
  btn-primary merupakan class bootstrap untuk membuat tombol berwarna biru.
• .btn secondary
  btn-secondary merupakan class bootstrap untuk membuat tombol berwarna abu-abu sedikit gelap.
• .btn-success
  btn-success merupakan class bootstrap untuk membuat tombol berwarna hijau.
• .btn-info
  btn-primary merupakan class bootstrap untuk membuat tombol berwarna biru langit.
• .btn-warning
  btn-warning merupakan class bootstrap untuk membuat tombol berwarna kuning.
• .btn-danger
  btn-danger merupakan class bootstrap untuk membuat tombol berwarna merah.
• .btn-dark
  btn-dark merupakan class bootstrap untuk membuat tombol dengan warna hitam.
• .btn-light
  btn- light merupakan class bootstrap untuk membuat tombol dengan warna putih.
• .btn-link
  btn- link merupakan class bootstrap untuk membuat tombol tanpa warna seperti link..

Contos script dalam penggunaan class 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-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>

Class button tags # bootstrap

btn tags ini dirancang untuk digunakan dengan elemen <button>. Namun, Anda juga dapat menggunakan kelas ini pada elemen <a> atau <input>

1. Tag <button>

Untuk menggunakan pada tag <button> dengan menggunakan atribut class kemudian ini atribut class dengan value contoh “btn btninfo”.

<button class="btn btn-primary" type="submit">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 class="btn btn-primary" type="button" value="Input"><input class="btn btn-primary" type="submit" value="Submit">

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.

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

Mengatur ukuran tombol

Bootstrap menyediakan 3 jenis ukuran, diantaranya kecil, normal, dan besar. Namun yang biasa di gunakan itu ukuran normal (default).

UKURAN	CLASS
Kecil	btn-sm
Normal (default)	btn
Besar	btn-lg

 

Contoh script.

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

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.

Baca juga :

Cara Membuat Table dengan Bootstrap
Menampilan Gambar dengan Bootstrap

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>

 

Sekian pembahasan singkat mengenai Cara Membuat Tombol dengan bootstrap. dapat saya ambil kesimpulan bahwa 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. Cukup dengan pamanggilan class kita sudah bisa melakukannya.

 

Tutorial Bootstrap Dasar Lainnya :

Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap