Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

Cara Menggunakan Button pada Bootstrap

Kali ini kita akan belajar cara menggunakan button pada bootstrap. Jika teman-teman belum tahu apa itu boostrap dan bagaimana cara menggunakannya, teman-teman bisa mempelajarinya pada materi sebelumnya yang berjudul Belajar Cara Menggunakan Bootstrap untuk Mempercantik Web. Pada kesempatan ini kita berfokus pada cara menggunakan button. Ternyata, button pada bootstrap bisa dirubah warna dan ukurannya.

LIHAT DEMO

Cara menggunakan bootstrap button sangatlah mudah layaknya kita membuat css sendiri. Kita tinggal masukkan nilai kelas dengan btn. Berikut ini adalah contohnya:

Mewarnai Button – Cara Menggunakan Button pada Bootstrap

Hanya menggunakan kelas btn tidak akan membuat button lebih menarik. Jika kita ingin lebih menarik, kita bisa menggunakan berbagai warna yang telah disediakan oleh bootstrap. Cara memberikan warna juga sangat mudah. Kita tinggal menambahkan nilai kelas. Warna pada bootstrap ada 6, yaitu Default, Primary, Success, Info, Warning dan Danger. Untuk warna primary, kita harus menggunakan btn-primary. Seperti ini codenya

Beginilah hasilnya:

Button Bootstrap - Menggunakan Button pada Bootstrap

Button Bootstrap terdiri dari 6 warna, yaitu: Default, Primary, Success, Info, Warning, Danger

Mengatur Ukuran Button – Cara Menggunakan Button pada Bootstrap

Selain mewarnai button kita juga bisa mengatur ukuran button. Ukuran button yang bisa gunakan adalah, Normal, Large, Small dan Extra Small. Untuk ukuran normal, kita tidak perlu menambah kelas. Berikut ini contohnya.

dan inilah hasilnya

Mengatur Ukuran Button - Menggunakan Button pada Bootstrap

Cara Mengatur Ukuran Button pada Bootstrap

Mengaplikasikan Button pada Anchor dan Submit

Button tidak hanya bisa kita gunakan pada elemen button. Button juga bisa kita aplikasikan kepada anchor dan submit. Contohnya seperti ini.

Nah, demikianlah cara Cara Menggunakan Button pada Bootstrap. Semoga tulisan ini bisa bermanfaat, bagi saya, maupun bagi teman-teman.