Kali ini kita akan mencoba membuat tombol geser kiri kanan (switch button) dengan menggunakan CSS lalu mengambil statusnya dengan javascript.
Kita manfaatkan properti CSS: ‘appearance’ pada elemen input checkbox untuk manipulasi tampilan field checkbox biasa menjadi tombol geser.
Kita juga menfaatkan pseudo-element ‘:before’ untuk manipulasi tampilan content di dalam tombol switch.
Berikut coding selengkapnya.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Switch Botton</title>
<style>
.toggle {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 98px;
height: 30px;
position: relative;
border-radius: 20px;
display: inline-block;
overflow: hidden;
outline: none;
border: none;
cursor: pointer;
background-color: #707070;
transition: background-color ease 0.3s;
}
.toggle:before {
content: "Depan Belakang";
display: block;
position: absolute;
z-index: 2;
width: 25px;
height: 25px;
background: #fff;
left: 2px;
top: 2px;
border-radius: 50%;
font:bold 12px/28px Helvetica;
text-indent: -40px;
word-spacing: 30px;
color: #fff;
text-shadow: -1px -1px rgba(0,0,0,0.15);
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
transition: all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}
.toggle:checked {background: #4CD964;}
.toggle:checked:before {left:70px;}
</style>
</head>
<body>
<h2 id="status">Belakang</h2>
<input id="swbtn" class="toggle" type="checkbox" />
<script>
let swbtn = document.getElementById("swbtn");
let status = document.getElementById("status");
swbtn.addEventListener("click", function(){
if (swbtn.checked) {
status.innerHTML = "Depan";
} else if (!swbtn.checked) {
status.innerHTML = "Belakang";
}
});
</script>
</body>
</html>
Selamat mencoba. Semoga bermanfaat.
Sumber: https://danklammer.com/articles/simple-css-toggle-switch/