Hai teman – teman, kembali lagi di dosenit.com. Setelah kemarin kita membahas mengenai Tabel dan form bootstrap, maka kali ini kita akan membahas salah satu elemen yang penting pada suatu website terutama website yang membutuhkan kontak langsung dengan user yaitu BUTTON.
sebelum membahas lebih dalam mengenai Button pada bootstrap, alangkah baiknya kita membahas mengenai dasar button dalam pemrograman html. Pada html, button dibuat dengan menambahkan tag
tulisan
Didalam tag kita dapat menambahkan banyak tag lain didalamnya seperti Link Button
Outline button
Dalam contoh – contoh button bootstrap diatas warna latar atau gambar button memenuhi tampilan button secara keseluruhan. Nah bagaimana kalau hanya menampilkan button dengan outlinenya saja tanpa warna latar ataupun gambar ?, untuk itu kita hanya perlu menambahlan class btn-outline- . lihat contoh dibawah
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Ukuran Button
Dalam bootstrap kita bisa mengatur ukuran button dengan memasukkan tag btn-lg , btn-sm, atau btn-block didalam class button sebelumnya contoh :
Large button
Small button
Block level button
Aktif / Nonaktif Button
Selain mengatur ukuran dalam bootstrap juga tersedia pilihan tag untuk mengatur kapan kita akan me-aktifkan button atau bahkan men-nonaktifkan atau disable button yang kita buat. contohnya
button aktif
button nonaktif
Link
Khusus untuk tag dalam menonaktifkan button yang dibuat ada sedikit perbedaan yaitu
- menambahkan class .diabled dalam tag , karena tag tidak mendukung penggunaan attribut disable seperti tag button
- pada tag jika tombol dinonaktifkan harus menyertakan attribut aria-disable=”true” untuk menunjukan status elemennya
- pada tag saat tombol dinonaktifkan tidak akan terlihat kursor menjadi tanda nonaktif [silang], ini berlaku pada beberapa browser yang mendukung “pointer-event”
Perataan Button / Align button
Button pada bootstrap juga dapat kita atur perataannya atau align nya yaitu dengan menambahkan class .float-right untuk button rata kanan, .float-left untuk button rata kiri. Khusus button rata tengah tidak bisa memakai .float-center karena bootstrap tidak mendukung hal tersebut maka sebagai gantinya biasanya saya memakai
untuk perataan button pada bootstrap 3 berbeda dari botstrap 4 yaitu menggunakan .pull-right atau .pull-left. sedangkan rata tengah sama dengan bootstrap 4.
kanan
kiri
button center dengan div
Itulah tutorial sedikit tentang penggunaan button pada Bootstrap khususnya pada bootstrap 4, selain hal – hal diatas teman -teman juga dapat men-modifikasi sendiri style dari button teman-teman.
Caranya yaitu dengan mengatur tag button dengan CSS. Sehingga tampilan nya dapat kita gabungkan antara desain button kita dengan desain dari bootstrap agar terlihat lebih bagus.
YogaBayu
Seorang yang menyukai dunia elektronika dan website.