Skip to content

On off #1

@DanielThomas3940

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions