Action

Source: Uiverse ↗
Author: Na3ar-17
Licence: MIT

Loading…

Code

<div class="container">
  <label class="label">
    <input class="input" type="checkbox" />
    <span class="circle"
      ><svg
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        class="icon"
      >
        <path
          d="M12 19V5m0 14-4-4m4 4 4-4"
          stroke-width="1.5"
          stroke-linejoin="round"
          stroke-linecap="round"
          stroke="currentColor"
        ></path>
      </svg>
      <div class="square"></div>
    </span>
    <p class="title">Download</p>
    <p class="title">Open</p>
  </label>
</div>

Prompt

Build "Action", 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, inline SVG. It sits on a dark 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/Na3ar-17/evil-dragon-24 (Na3ar-17, MIT).