Cara Membuat Multi Button Active
Cara Membuat Multi Button Active - Di dalam bootstrap terdapat komponen button group yang bisa kita manfaatkan untuk berbagai macam kebutuhan, misalnya saja pagination atau sebagai komponen menu. Nah, pada kesempatan kali ini saya akan bagikan tutorial sederhana bagaimana membuat button group atau multi button dengan HTML & CSS. Jika kalian ingin mencoba membuatnya kalian bisa ikuti langkah-langkahnya berikut ini.
1. Sintak HTML
Langkah pertama untuk membuat multi button, silahkan buat file index.html kemudian kalian bisa ketikan sintak HTML untuk membuat button default-nya.
<div class="box-button">
<button class="active">Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
</body>
2. Sintak CSS
Langkah berikutnya setelah mengetikan sintak HTML seperti diatas adalah mendesain button dan dibuatkan button group dengan sintak CSS berikut ini.
height: 100vh;
margin: 0;
display: grid;
place-items: center;
background-color: #DAD9DE;
}
.box-button {
border: 5px solid #0988A9;
border-radius: 50px;
}
.box-button button {
background-color: #DAD9DE;
color: #3A3A3C;
border: none;
margin: 0;
padding: 1em 2em;
font-weight: bold;
outline: none;
font-size: 1.5em;
}
.box-button button:nth-child(1) {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
}
.box-button button:nth-child(3) {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
.box-button button:hover {
cursor: pointer;
transition: 0.2s ease-in-out;
}
.active {
background-color: #0988A9 !important;
color: #DAD9DE !important;
}
3. Sintak jQuery
Setelah mendesain button dengan sintak CSS di atas, langkah terakhir kalian wajib menambahkan sintak jQuery berikut untuk membuat button active.
<script>
$(document).ready(function(){
$('.box-button').on('click', 'button', function() {
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
Setelah semua sintak diatas telah diketikkan, simpan filenya kemudian kalian bisa melihat hasil akhirnya pada browser masing - masing.
Baiklah, cukup sekian tutorial Cara Membuat Multi Button Active, semoga bermanfaat dan selamat mencoba.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
