Toggle

Source: Uiverse ↗
Author: Pradeepsaranbishnoi
Licence: MIT

Loading…

Code

<form class="form">
    <label for="01">One</label>
    <input id="01" type="radio" name="r" value="1" checked="">
    <label for="02">Two</label>
    <input id="02" type="radio" name="r" value="2">
    <label for="03">Three</label>
    <input id="03" type="radio" name="r" value="3">
</form>

Prompt

Build "Toggle", a toggle animation. Write it as plain HTML and CSS: one container element and a stylesheet, no JavaScript unless it is essential. Technique: CSS keyframes. It sits on a light background, in a 16:10 frame. Respect prefers-reduced-motion with a still state, pause work when the element is off screen, and keep it accessible. Original: https://uiverse.io/Pradeepsaranbishnoi/black-husky-57 (Pradeepsaranbishnoi, MIT).