<title>On/Off Button</title>
<style>
.onoff {
width: 50px;
height: 25px;
background-color: #ccc;
border-radius: 25px;
position: relative;
}
.onoff:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 2px;
transition: all 0.3s;
}
.onoff.active:before {
left: calc(100% - 22px);
}
</style>
<script>
function toggleButton() {
var button = document.getElementById("toggle");
var onoff = document.querySelector(".onoff");
if (button.checked) {
onoff.classList.add("active");
} else {
onoff.classList.remove("active");
}
}
</script>
.onoff:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
left: 2px;
transition: all 0.3s;
}
.onoff.active:before {
<script> function toggleButton() { var button = document.getElementById("toggle"); var onoff = document.querySelector(".onoff"); if (button.checked) { onoff.classList.add("active"); } else { onoff.classList.remove("active"); } } </script>left: calc(100% - 22px);
}
</style>