Cara Membuat Button atau Tombol dengan Bootstrap

By | November 9, 2021

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>

Cara Membuat Button atau Tombol dengan Bootstrap

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

Cara Membuat Button atau Tombol dengan Bootstrap

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>

Cara Membuat Button atau Tombol dengan Bootstrap

 

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

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *