Membuat Variasi Button dengan Bootstrap

Bootstrap adalah salah satu framework-css yang memiliki banyak sekali manfaat yang bisa kita gunakan untuk membangun website kita, salah satunya adalah membuat button.

Tak jarang ketika kita mengunjungi sebuah website kita melihat tombol submit atau hapus yang beraneka ragam, sehingga membuat website tersebut terlihat begitu menarik. Nah, hal yang akan kita lakukan juga tak jauh berbeda, dipertemuan kita kali ini saya bahas sedikit bagaimana membuat button yang menarik dengan menggunakan bootstrap. Kalian juga bisa menerapkan button ini ke dalam blog pribadi kalian masing-masing.

Pemasangan Bootstrap

Seperti biasa, masukkan script berikut ini tepat diatas kode </head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

Lalu masukkan kode javascriptnya di atas kode </body>.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

Atau jika kalian ingin memasang nya di localhost bisa download script nya di www.getbootstrap.com

Untuk membuat button menggunakan bootstrap, kode penulisan dasarnya adalah seperti dibawah ini.

<button class="btn btn-lg btn-primary" type="submit" name="input" value="Input Data">Button Primary</button>

*)Penjelasan
1. btn adalah penulisan dasar untuk membuat button, btn sendiri artinya button, btn-lg adalah ukuran button nya, sedangkan btn-primary adalah jenis button yang digunakan.

Mengubah Ukuran Button

Untuk membuat button dengan ukuran large/besar gunakan kode dibawah ini pada bagian class;

btn-lg

Untuk membuat button dengan ukuran sedang gunakan kode dibawah ini pada bagian class;

btn-sm

Untuk membuat button dengan ukuran kecil/small gunakan kode dibawah ini pada bagian class;

btn-xs

Mengubah Jenis Button

Untuk membuat button default gunakan kode berikut pada bagian class;

btn-default

Untuk membuat button primary gunakan kode berikut pada bagian class;

btn-primary

Untuk membuat button danger gunakan kode berikut pada bagian class;

btn-danger

Untuk membuat button info gunakan kode berikut pada bagian class;

btn-info

Untuk membuat button success gunakan kode berikut pada bagian class;

btn-success

Untuk membuat button toolbar gunakan kode berikut pada bagian class;

btn- toolbar

Untuk membuat button warning gunakan kode berikut pada bagian class;

btn- warning

Sederhana kan cara buatnya, untuk membuat tampilan yang menarik seperti itu tak perlu repot-repot lagi membuat kode. Untuk demo button bisa dilihat di bawah ini bagi yang masih penasaran.

Demo