On off

[DanielThomas3940]

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