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
|
1 2 3 4 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> |
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
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" class="btn">Basic</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-link">Link</button> |
Tampilan
2. Warna Border
Selain warna pada buttonnya ada juga yang hanya mengganti warna bordernya saja. Contoh penggunaanya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 |
<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-dark">Dark</button> <button type="button" class="btn btn-outline-light text-dark">Light</button> |
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
|
1 2 3 |
<button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary">Default</button> <button type="button" class="btn btn-primary btn-sm">Small</button> |
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 :
|
1 2 3 4 |
<a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button"> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<p>Block Level Buttons</p> <button type="button" class="btn btn-primary btn-block">Button 1</button> <button type="button" class="btn btn-success btn-block">Button 2</button> <br> <p>Large Block Level Buttons</p> <button type="button" class="btn btn-info btn-lg btn-block">Button 1</button> <button type="button" class="btn btn-danger btn-lg btn-block">Button 2</button> <br> <p>Small Block Level Buttons</p> <button type="button" class="btn btn-dark btn-sm btn-block">Button 1</button> <button type="button" class="btn btn-warning btn-sm btn-block">Button 2</button> |
Tampilan :
6. Button States
Ada 3 macam status button, yaitu normal, active, dan disabled. Cara penulisannya adalah sebagai berikut
|
1 2 3 |
<button type="button" class="btn btn-primary">Primary Button</button> <button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary" disabled>Disabled Primary</button> |
Tampilan :
7. Spinner Button
Spinner button merupakan tombol dengan icon loading di dalamnya. Cara penggunaanya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<button class="btn btn-primary"> <span class="spinner-border spinner-border-sm"></span> </button> <button class="btn btn-success"> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-danger" disabled> <span class="spinner-border spinner-border-sm"></span> Loading.. </button> <button class="btn btn-info" disabled> <span class="spinner-grow spinner-grow-sm"></span> Loading.. </button> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="row mb-3"> <div class="col-sm-4"> <p>Small</p> <div class="btn-group btn-group-sm" role="group" aria-label="Basic example"> <button type="button" class="btn btn-info">Left</button> <button type="button" class="btn btn-info">Middle</button> <button type="button" class="btn btn-info">Right</button> </div> </div> <div class="col-sm-4"> <p>Default</p> <div class="btn-group" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-primary">Middle</button> <button type="button" class="btn btn-primary">Right</button> </div> </div> <div class="col-sm-4"> <p>Large</p> <div class="btn-group btn-group-lg" role="group" aria-label="Basic example"> <button type="button" class="btn btn-primary">Left</button> <button type="button" class="btn btn-success">Middle</button> <button type="button" class="btn btn-danger">Right</button> </div> </div> </div> |
Tampilan :
9. Nesting Button
Nesting button merupakan tombol bertingkat dan cara penggunaannya adalah sebagai berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-primary">1</button> <button type="button" class="btn btn-primary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> <a class="dropdown-item" href="#">Dropdown link</a> <a class="dropdown-item" href="#">Dropdown link</a> </div> </div> </div> |
Tampilan :
10. Button Toolbar
Button toolbar biasa digunakan pada header aplikasi sobat cara penggunaannya adalah sebagau berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <div class="btn-group mr-2" role="group" aria-label="First group"> <button type="button" class="btn btn-primary">Button 1</button> <button type="button" class="btn btn-primary">Button 2</button> <button type="button" class="btn btn-primary">Button 3</button> <button type="button" class="btn btn-primary">Button 4</button> </div> <div class="btn-group mr-2" role="group" aria-label="Second group"> <button type="button" class="btn btn-primary">Button 5</button> <button type="button" class="btn btn-primary">Button 6</button> <button type="button" class="btn btn-primary">Button 7</button> </div> <div class="btn-group" role="group" aria-label="Third group"> <button type="button" class="btn btn-primary">Button 8</button> </div> </div> |
Tampilan :
11. Button Group Vertikal
Seperti namanya, button ini tidaklah horizontal seperti biasanya namun vertikal atau menurun ke bawah, cara penulisannya adalah sebagai berikut
|
1 2 3 4 5 6 |
<div class="btn-group-vertical"> <button type="button" class="btn btn-info">Button 1</button> <button type="button" class="btn btn-info">Button 2</button> <button type="button" class="btn btn-info">Button 3</button> <button type="button" class="btn btn-info">Button 4</button> </div> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with dropdown button"> <div class="input-group-append"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" aria-label="Text input with segmented dropdown button"> <div class="input-group-append"> <button type="button" class="btn btn-primary">Action</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="sr-only">Toggle Dropdown</span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div role="separator" class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </div> <div class="input-group mb-3"> <select class="custom-select" id="inputGroupSelect04"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="input-group-append"> <button class="btn btn-primary" type="button">Button</button> </div> </div> <div class="input-group mb-3"> <div class="custom-file"> <input type="file" class="custom-file-input" id="inputGroupFile04"> <label class="custom-file-label" for="inputGroupFile04">Choose file</label> </div> <div class="input-group-append"> <button class="btn btn-primary" type="button"> Upload </button> </div> </div> |
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
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> |
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
|
1 2 3 4 5 6 7 8 9 10 |
<button type="button" class="btn"><i class="fa fa-check"></i> Basic</button> <button type="button" class="btn btn-primary"><i class="fa fa-plus"></i> Primary</button> <button type="button" class="btn btn-secondary"><i class="fa fa-minus"></i> Secondary</button> <button type="button" class="btn btn-success"><i class="fa fa-save"></i> Success</button> <button type="button" class="btn btn-info"><i class="fa fa-info"></i> Info</button> <button type="button" class="btn btn-warning"><i class="fa fa-warning"></i> Warning</button> <button type="button" class="btn btn-danger"><i class="fa fa-trash"></i> Danger</button> <button type="button" class="btn btn-dark"><i class="fa fa-close"></i> Dark</button> <button type="button" class="btn btn-light"><i class="fa fa-arrow-left"></i> Light</button> <button type="button" class="btn btn-link"><i class="fa fa-check"></i> Link</button> |
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 :