YURISTGAMEINIGAMEID101

Cara Membuat Button Yang Menarik Dengan Bootstrap 4

Button merupakan salah satu elemen yang paling penting dan paling sering digunakan di dalam HTML untuk pembuatan website. Tanpa button, mungkin sebuah website akan terasa ada yang janggal karena button merupakan elemen yang bisa diklik untuk beberapa fungsi, seperti pemrosesan data, membuat animasi, dan lain-lain.

Lalu bagaimana cara membuat button? Pastinya kalian sudah belajar bagaimana cara membuat button di pure CSS / CSS alami (tanpa framework). Dengan adanya framework, kalian bisa membuat sebuah objek atau elemen menarik dengan hanya menambahkan class sesuai yang disediakan oleh framework tersebut. Inilah cara termudah untuk membuat desain website yang menarik tanpa repot-repot membuat style dari tiap elemen, kalian hanya perlu mengubah cssnya seperlu kalian sesuai dengan websitenya.



Ada beberapa framework yang bisa kita pakai untuk membuat button, contohnya Materialize, SemanticUI, dan Bootstrap. Tidak hanya button, setiap framework css pasti menyediakan css setiap elemen di html, contohnya form, grid, dan lain-lain. Namun yang kita pakai sekarang ini adalah Bootstrap. Yuk simak langsung tutorialnya.

Persiapan : Bahan
- Text Editor (Sublime Text, Notepad++, dll)
- Browser

#1. Buka Text Editor masing-masing.
#2. Buat file HTML baru dengan nama bebas (ex: index.html)
#3. Isi html tersebut dengan starter template milik bootstrap. Silahkan copy source code dibawah ini lalu pastekan ke htmlnya.

Jika sudah membuat starter template bootstrap, kita akan mulai membuat buttonnya. Ada 9 jenis button yang disediakan bootstrap, yaitu :
  • Button Primary
  • Button Secondairy
  • Button Success
  • Button Danger
  • Button Warning
  • Button Info
  • Button Light
  • Button Dark
  • Button Link
Dari sembilan button diatas, yang membedakannya adalah warnanya. Misalnya button danger adalah warna merah, button warning berwarna kuning, dan yang lainnya bisa dilihat dibawah ini.

Lalu bagaimana cara menggunakannya? Yup kalian tinggal menambahkan tag <button> yang classnya sudah disediakan oleh bootstrap. Jadi kalian tidak perlu repot-repot membuat style dari buttonnya lagi. Cara membuat buttonnya bisa pilih salah satu, silahkan cek gambar dibawah ini.

Sesuai dengan gambar ini, untuk membuat button kita hanya perlu menambahkan classnya. Untuk membuat tombol primary hanya tinggal menambahkan class="btn btn-primary". Cukup mudah bukan?

Cara Mengubah Ukuran Button dengan Bootstrap
Setelah selesai membuat button, ada cara untuk mengubah ukuran dari sebuah button. Caranya cukup mudah karena sama seperti cara diatas, yaitu cukup menambahkan class. Ukuran yang diberikan bootstrap hanya ada 2 ukuran, yaitu Besar dan kecil. Sekarang coba lihat gambar dibawah ini.

Misalnya kita sudah membuat button primary, untuk memperbesarnya cukup tambahkan "btn-lg" di dalam class dari button tersebut, yang akan jadi seperti ini :
<button type="button" class="btn btn-primary btn-lg">Large button</button>
 
Cukup mudah bukan? dengan hanya menambahkan "btn-lg" atau "btn-sm" kalian sudah bisa mengubah ukuran button.

Penutup

Semoga tutorial Bootstrap kali ini bisa membuat kalian lebih maju lagi di ilmu tentang web design. Kalian juga bisa melihat tutorial bootstrap atau tutorial web lainnya di Zuramai. Terima kasih dan semoga bermanfaat :D.

Related Post