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.

<body>
    <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.

body {
    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 src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<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.

Cara Membuat Multi Button Active

Baiklah, cukup sekian tutorial Cara Membuat Multi Button Active, semoga bermanfaat dan selamat mencoba.

19 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat