Tutorial Belajar Bootstrap 4 Part 5 – Membuat Tombol dengan Bootstrap

Selamat datang di tutorial warung belajar, dalam tutorial kali ini kita masih membahas mengenai tutorial bootstrap 4,  jika dalam tutorial sebelumnya kita telah membahas mengenai cara menampilkan gambar dengan bootstrap, dalam tutorial ini kita akan membahas mengenai cara membuat tombol dengan bootstrap.

Bootstrap memiliki beberapa class yang bisa digunakan untuk mengatur tampilan tombol, sehingga tampilan tombol yang anda buat akan lebih menarik, baik kita akan langsung saja memulai pembahasan cara membuat tombol dengan bootstrap.

 

Style Button dengan Bootstrap 4

kita akan membahas beberapa class yang bisa digunakan untuk style button dengan bootstrap 4, perhatikan contoh skrip dibawah ini :

Semisal kita simpan dengan nama tombol.html, lalu kita buka dibrowser maka hasilnya adalah seperti berikut ini :

Keterangan :

  • Tombol basic ditampilkan dengan warna abu – abu karena tombol menggunakan class btn
  • Tombol Primary ditampilkan dengan warna biru karena tombol menggunakan class btn-primary
  • Tombol Secondary ditampilkan dengan warna abu – abu sedikit lebih gelap karena tombol menggunakan class btn-secondary
  • Tombol Success ditampilkan dengan warna hijau karena tombol menggunakan class btn-success
  • Tombol Info ditampilkan dengan warna biru agak kehijauan karena tombol menggunakan class btn-info
  • Tombol Warning ditampilkan dengan warna orange karena tombol menggunakan class btn-warning
  • Tombol Danger ditampilkan dengan warna Merah karena tombol menggunakan class btn-danger
  • Tombol Dark ditampilkan dengan warna Hitam karena tombol menggunakan class btn-dark
  • Tombol Light ditampilkan dengan Putih dan text hitam karena tombol menggunakan class btn-light
  • Tombol Link ditampilkan dengan warna putih kebiruan dan text biru  karena tombol menggunakan class btn-link

 

 

 

Tombol Outline dengan Bootstrap 4

Pada bootstrap 4 anda juga dapat membuat tombol dengan tampilan outline, perhatikan contoh skrip dibawah ini :

Semisal kita simpan dengan nama tombol_outline.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

  • Tombol Outline ini memiliki konsep yang sama dengan style button yang telah dijelaskan dibagian sebelumnya, yang menjadi perbedaan tombol outline memiliki effect hover ketika terdapat kursor mouse diatas tombol, warna tombol akan berubah sesuai class yang digunakan.

 

 

 

Mengatur ukuran tombol pada bootstrap

pada bootstrap 4 juga terdapat class yang bisa digunakan untuk mengatur ukuran dari tombol, anda bisa menyesuaikan dengan kebutuhan tombol yang digunakan.

Perhatikan skrip dibawah ini untuk contoh dari penggunaan skrip :

Semisal kita simpan dengan nama ukuran_tombol_bootstrap.html, lalu kita buka di browser maka hasilnya :

Keterangan :

  • Tombol pertama ditampilkan dengan ukuran besar, karena menggunakan class btn-lg
  • Tombol kedua ditampilkan dengan ukuran standart, karena menggunakan class btn-md
  • Tombol ketiga ditampilkan dengan ukuran kecil, karena menggunakan class btn-sm

 

 

 

Block Level Buttons

Berikutnya kita akan membahas mengenai bagaimana membuat tampilan tombol yang memiliki lebar penuh sesuai parent dari tombol tersebut, nah bingung kan  hehehe, ukey

langsung saja kita lihat contoh skripnya :

Semisal kita simpan dengan nama tombol_block.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Tombol ditampilkan dengan ukuran lebar penuh, karena kita menggunakan class btn-block, serta tombolnya kita letakkan didalam tag <div> dengan class contrainer-fluid sehingga membuat parentnya akan memiliki lebar 100% dari device yang mengakses.

 

 

Tombol active dan disabled

Dalam bootstrap 4 terdapat class active dan disabled yang digunakan untuk mengatur tampilan dari tombol.

  • Class .active digunakan untuk memberikan tanda pada tombol, ketika tombol telah di klik.
  • Class .disabled digunakan untuk mendisabled tombol agar tidak bisa di klik, jika menggunakan tag <button> anda bisa langsung menggunakan attribute disabled bawaan HTML untuk disabled tombol, untuk class .disabled ini khusus digunakan untuk tag <a>

Untuk contoh skripnya adalah seperti berikut ini :

Semisal kita simpan dengan tombol_active_disabled, lalu kita buka di browser maka hasilnya adalah sebagai berikut :

Keterangan :

  • Tombol 1 ditampilkan seperti tombol biasa
  • Tombol 2 ditampilkan dengan effect seperti tombol yang telah di klik sebelumnya karena menggunakan class .active
  • Tombol 3 ditampilkan dengan mode disabled karena kita menggunakan attribute disabled, attribute disabled digunakan jika menggunakan tag <button>
  • Tombol 4 ditampilkan dengan mode disabled menggunakan class .disabled karena kita menggunakan tag <a>

 

Bagaimana teman – teman cukup banyak ya pembahasannya hehehe, baik sekian dulu pembahasan mengenai cara membuat tombol dengan bootstrap, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial bootstrap selanjutnya.

One thought on “Tutorial Belajar Bootstrap 4 Part 5 – Membuat Tombol dengan Bootstrap

Leave a Reply to Andi Cancel reply

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