Bootstrap Button
Button adalah bagian integral dari situs web dan aplikasi, yang digunakan untuk berbagai keperluan seperti submit atau mereset form HTML, melakukan tindakan interaktif seperti menunjukkan atau menyembunyikan sesuatu di halaman web dengan mengklik tombol, mengarahkan pengguna ke halaman lain, dan sebagainya. Bootstrap menyediakan cara yang cepat dan mudah untuk membuat dan meng-customize button.
1. Bootstrap Button Style
Button style dapat diterapkan ke elemen apa pun, namun ini diterapkan secara normal ke elemen <a>, <input>, dan <button> untuk rendering.
Contoh cara membuat button style di Bootstrap :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</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>
</body>
</html>
Hasilnya :
2. Bootstrap Outline Button
Kita juga dapat membuat outline button dengan mengganti kelas button modifier, seperti ini :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<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-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light">Light</button>
</body>
</html>
Hasilnya :
3. Ukuran Button
Bootstrap memberi kita opsi untuk memperbesar button ke atas atau ke bawah, kita dapat membuat button lebih besar atau lebih kecil dengan menambahkan kelas tambahan .btn-lg atau .btn-sm, seperti ini :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<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>
</body>
</html>
Hasilnya :
Kita juga dapat membuat button level blok (tombol yang menutupi lebar penuh elemen induk) dengan menambahkan kelas tambahan .btn-blok ke tombol, seperti ini :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
</body>
</html>
Hasilnya :
4. Disabled Button
Terkadang kita perlu menonaktifkan button untuk alasan tertentu, misalnya pengguna (user) jika tidak memenuhi syarat untuk melakukan tindakan khusus ini atau ingin memastikan bahwa pengguna harus melakukan semua tindakan lain yang diperlukan sebelum melanjutkan ke tindakan khusus ini.
a. Membuat Disabled Button Menggunakan Button dan Input Elemen
Button yang dibuat melalui tag <button> atau <input> dapat dinonaktifkan dengan menambahkan atribut disabled ke masing-masing elemen.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<button type="button" class="btn btn-primary btn-lg" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
</body>
</html>
Hasilnya :
b. Membuat Disabled Button Menggunakan Element Anchor
Button yang dibuat melalui tag <a> dapat dinonaktifkan (disabled) dengan menambahkan kelas .disabled, seperti ini :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled">Link</a>
</body>
</html>
Hasilnya :
5. Bootstrap Active Button
Kita dapat menerapkan kelas .active untuk memaksa tombol-tombolnya terlihat aktif (misal ketika ditekan). Biasanya kita tidak perlu menambahkan kelas ini ke dalam button, karena keadaan aktif mereka secara otomatis ditata oleh Bootstrap menggunakan CSS :active pseudo-class.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
</body>
</html>
Hasilnya :
6. Spinner Button
Bootstrap dapat memasukkan ikon spinner dalam sebuah button untuk menunjukkan status pemuatan di aplikasi.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span> Loading...
</button>
<button type="button" class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span> Loading...
</button>
</body>
</html>
Hasilnya :
Button Group Bootstrap
Untuk membuat button group kita bisa menggunakan class .btn-group. di elemen <div> .. </div>, kemudian didalam elemen tersebut buat tombol-tombol yang ingin digabungkan dengan cara menggunakan class .btn.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<div class="btn-group">
<button type="button" class="btn btn-danger">Tombol 1</button>
<button type="button" class="btn btn-warning">Tombol 2</button>
<button type="button" class="btn btn-success">Tombol 3</button>
<a href="#" class="btn btn-secondary">Tombol 4</a>
<a href="#" class="btn btn-primary">Tombol 5</a>
</div>
</body>
</html>
Hasilnya :
1. Ukuran Tombol Button Group
Untuk mengubah ukuran tombol yang ada di button group caranya kita tinggal menggunakan salah satu class seperti berikut.
- .btn-group-sm
Untuk membuat tombol berukuran kecil - .btn-group-lg
Untuk membuat tombol berukuran besar
Letakkan class di atas beriringan dengan class .btn-group.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<h5>Tombol besar</h5>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-danger">Tombol 1</button>
<button type="button" class="btn btn-warning">Tombol 2</button>
<button type="button" class="btn btn-success">Tombol 3</button>
<a href="#" class="btn btn-secondary">Tombol 4</a>
<a href="#" class="btn btn-primary">Tombol 5</a>
</div>
<h5>Tombol sedang</h5>
<div class="btn-group">
<button type="button" class="btn btn-danger">Tombol 1</button>
<button type="button" class="btn btn-warning">Tombol 2</button>
<button type="button" class="btn btn-success">Tombol 3</button>
<a href="#" class="btn btn-secondary">Tombol 4</a>
<a href="#" class="btn btn-primary">Tombol 5</a>
</div>
<h5>Tombol kecil</h5>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-danger">Tombol 1</button>
<button type="button" class="btn btn-warning">Tombol 2</button>
<button type="button" class="btn btn-success">Tombol 3</button>
<a href="#" class="btn btn-secondary">Tombol 4</a>
<a href="#" class="btn btn-primary">Tombol 5</a>
</div>
</body>
</html>
Hasilnya :
2. Tombol Button Group Dropdown
Bootstrap juga menyediakan komponen tombol yang memiliki fitur dropdown.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<div class="btn-group">
<button type="button" class="btn btn-primary">Tombol 1</button>
<button type="button" class="btn btn-primary"> Tombol 2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tombol Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
Hasilnya :
3. Tombol Button Group Vertikal
Jika dari contoh-contoh sebelumnya tombol yang dibuat berbentuk datar atau horizontal, maka kita jug bisa membuat tombol vertical.
Untuk membuat tombol vertical dengan bootstrap 4, kita bisa gunakan class .btn-group-vertical sebagai ganti class .btn-group.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Button Dengan Bootstrap 4</title>
</head>
<body>
<br>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Tombol 1</button>
<button type="button" class="btn btn-primary"> Tombol 2</button>
<button type="button" class="btn btn-primary"> Tombol 3</button>
<button type="button" class="btn btn-primary"> Tombol 4</button>
<button type="button" class="btn btn-primary"> Tombol 5</button>
</div>
<br/>
<br/>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Tombol 1</button>
<button type="button" class="btn btn-primary"> Tombol 2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tombol Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div>
</div>
<script src="../assets/js/jquery.js"></script>
<script src="../assets/js/popper.js"></script>
<script src="../assets/js/bootstrap.js"></script>
</body>
</html>
hasilnya :
Referensi :
- https://getbootstrap.com/docs/4.3/components/buttons/
- https://getbootstrap.com/docs/4.3/components/button-group/
- https://www.malasngoding.com/tombol-bootstrap-4/
- https://www.malasngoding.com/button-group-bootstrap-4/
