Cara Membuat Simple Toggle Switch Button

Cara Membuat Simple Toggle Switch Button

Cara Membuat Toggle Switch Button - Setelah Lama tidak update lagi karena kesibukan, kali ini saya akan berbagi tutorial unik seputar web desain. Ya memang membahas tentang desain web ini tidak akan ada habisnya karena dunia desain web itu terus berkembang. Namun kali ini saya hanya memberikan tutorial sederhana yakni mebuat tombol switch dengan HTML dan CSS serta menggunakan fungsi javascript untuk aksinya. Tanpa panjang lebar berikut ini tutornya.


Cara Membuat Tombol Saklat atau Switch

Pertama, kita siapkan dahulu kode HTML-nya kira-kira seperti dibawah ini

<!-- saklar sederhana -->
<span class='saklar' onclick='saklar()'>
<span></span>
</span>

Selanjutnya kita buat CSS seperti dibawah ini:

.saklar {
    position: absolute;
    height: 20px;
    width: 50px;
    background: #ddd;
    border-radius: 50px;
    top: 10px;
    left: 10px;
}
.saklar > span {
    position: absolute;
    height: 24px;
    width: 24px;
    background: #fff;
    border-radius: 50px;
    top: -2px;
    left: 0;
    transition: .5s;
}
.saklar.active {
    background: rgba(46, 204, 113, 0.39);
}
.saklar.active > span {
    transform: translateX(100%);
    background: #26de81;
}


Langkah terakhir kita membuat javascript dan menerapkan aksi apa setelah kita menyalakan saklarnya. Javascriptnya seperti berikut:

function saklar(){
    var tombol_saklar = document.getElementsByClassName('saklar')[0].classList.toggle('active')
    if(tombol_saklar){
        /* aksi disini setelah tombol nyala */
    } else {
        /* aksi disini setelah tombol mati */
    }
}


Maka hasil jadinya kira-kira seperti di bawah ini:



Kamu juga bisa liat demonstrasi pada template saya disini untuk penerapan switch button yang saya buat ini.


Itulah tutorial sederhana membuat switch button dengan CSS dan Javascript. Masih banyak sebenarnya tentang tombol switch ini secara custom mungkin setiap orang berbeda-beda cara membuatnya. Dan ini adalah cara tersimpel yang bisa kamu terapkan jika ingin membuat tombol switch ini. Nanti kan tutorial Code Pelajar selanjutnya.


Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel