Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Cara Mempercantik Button pada HTML dengan Bootsrap 4 Dengan Mudah – Setelah sebelumnya saya membahas tentang input pada form yang menggunakan bootstrap juga. Pada postingan kali ini saya akan membahas tentang membuat tampilan button lebih bagus dan berwarna menggunakan bootstrap. Selain itu akan saya bahas macam-macam button pada bootstrap mulai dari warna tombol/button, button outline, button group vertical, button spinner/tombol loading, input group button, dll.

Baca juga :

Macam-macam Form Input pada HTML dan Bootstrap

Seperti yang sudah sobat tahu, bootstrap sudah menyediakan banyak macam/jenis tombol yang bisa digunakan hanya tinggal memanggil kelasnya saja. Namun sebenarnya kita bisa saja membuat cssnya sendiri namun tentunya itu cukup memakan waktu jika kita membutuhkan banyak jenis tombol. Oleh karena itu banyak developer yang menggunakan bootstrap. Biasanya jika sobat mendownload template gratis juga pasti menggunakan bootstrap juga namun karena banyak yang belum tahu tentang cara penggunaan atau fitur-fitur apa saja yang ada pada bootstrap menjadikan banyak programmer baru yang tidak menggunakan fitur-fitur ini yang sebenarnya programmer tersebut membutuhkan untuk pengembangan aplikasinya atau malah bikin sendiri cssnya dan memakan banyak waktu belum tentu juga hasilnya lebih bagus dari bawaan bootstrap ini.

Sebelum membuat project ini tentunya kita harus memasykkan dulu librari css dan jsnya. Karena keperluan demo jadi saya menggunakan css dan js online. Jika untuk keperluan development maka sangat dianjurkan untuk mendownloadnya terleboh dahulu. Atau sobat bisa download bersama dengan project ini pada akhir postingan. Css dan js kita tuliskan pada tag <head>…</head>, kodenya adalah sebagai berikut

Berikut adalah macam-macam tombol yang ada pada bootstrap :

1. Button Style (Warna)

Ada banyak macam-macam warna yang telah disediakan oleh bootstrap, contoh penulisan kodenya adalah sebagai berikut

Tampilan

2. Warna Border

Selain warna pada buttonnya ada juga yang hanya mengganti warna bordernya saja. Contoh penggunaanya adalah sebagai berikut

Tampilan :

3. Button Size

Standar dari bootstrap ada 3 macam ukuran yaitu kecil, sedang dan besar. Untuk ukuran sedang itu adalah ukuran defaultnya. Cara penulisan kodenya adalah sebagai berikut

Tampilan :

4. Buttom Elements

Penggunaan button ini sebenarnya hanya mengganti nama classnya saja. Untuk elemennya bisa apa saja seperti input, button, span, p, a, dll dan nanti akan menghasilkan tampilan yang sama. Cara penggunaannya adalah sebagai berikut :

Tampilan :

5. Block Button

Jika sobat ingin width dari button tersebut mengikuti formnya maka sobat bisa menggunakan cara ini. Block button membuat tombol mengikuti besar parentnya. Ada 3 macam besar block button yaitu kecil, sedang dan besar. Cara penggunaannya adalah sebagau berikut

Tampilan :

6. Button States

Ada 3 macam status button, yaitu normal, active, dan disabled. Cara penulisannya adalah sebagai berikut

Tampilan :

7. Spinner Button

Spinner button merupakan tombol dengan icon loading di dalamnya. Cara penggunaanya adalah sebagai berikut

Tampilan :

8. Button Group

Dalam button group jumlahnya bisa berapa saja dan ukurannya ada 3 macam yaitu kecil, sedang dan besar. Untuk kodenya adalah sebagai berikut

Tampilan :

9. Nesting Button

Nesting button merupakan tombol bertingkat dan cara penggunaannya adalah sebagai berikut

Tampilan :

10. Button Toolbar

Button toolbar biasa digunakan pada header aplikasi sobat cara penggunaannya adalah sebagau berikut

Tampilan :

11. Button Group Vertikal

Seperti namanya, button ini tidaklah horizontal seperti biasanya namun vertikal atau menurun ke bawah, cara penulisannya adalah sebagai berikut

Tampilan :

 

12. Input Group Button

Sebenarnya jenis ini sudah saya jelaskan pada postingan sebelumnya tentang Form Input. Namun karena ini merupakan gabungan dari form input dan button jadinya saya masukkan juga dalam postingan ini. Cara penggunaannya adalah sebagai berikut

Tampilannya :

 

13. Button dengan Icon

Jika ingin menggunakan button dengan icon maka sobat perlu menambahkan librari fontawesome terlebih dahulu. Sebenarnya librari untuk menampilkan icon tidak hanya fontawesome namun pada contoh kali ini saya menggunakan fontawesome. Jika sobat belum memasukkan librari ini tentu icon tidak akan muncul berapa kali pun mencoba itu akan percuma. Untuk librarinya bisa sobat download pada website resminya disini. Disitu juga telah disediakan macam-macam icon yang bisa sobat gunakan tentunya menyesuaikan dengan versi dan jenisnya. Jika sobat mendownload yang Free maka tidak akan bisa menggunakan icon dengan versi Pro. Untuk contoh librari saya

Pada contoh diatas saya menggunakan css online, jika sobat menggunakan untuk development maka sobat perlu mendownloadnya terlebih dahulu pada website resminya atau pada akhir postingan ini. Contoh penggunaannya adalah sebagai berikut

Hasilnya :

 

Sekian postingan saya tentang cara mempercantik tombol pada HTML menggunakan Bootstrap dengan mudah. Jika ada kesalahan penulisan saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah. Sampai bertemu lagi pada postingan saya lainnya.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

9 thoughts on “Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Leave a Reply

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

12 + fourteen =