Toggle

Source: Uiverse ↗
Author: XuYeean
Licence: MIT

Loading…

Code

<div class="radio-input">
      <div class="radio">
        <input checked="" value="value-1" name="future" id="value-1" type="radio" class="input">
        <label for="value-1">
          <div class="center">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </label>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="block"></div>
      </div>
      <div class="radio">
        <input value="value-2" name="future" id="value-2" type="radio" class="input">
        <label for="value-2">
          <div class="center">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </label>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="block"></div>
      </div>
      <div class="radio">
        <input value="value-3" name="future" id="value-3" type="radio" class="input">
        <label for="value-3">
          <div class="center">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </label>
        <div class="top"></div>
        <div class="bottom"></div>
        <div class="block"></div>
      </div>
    </div>

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/XuYeean/angry-donkey-87 (XuYeean, MIT).