Click

Source: Uiverse ↗
Author: neerajbaniwal
Licence: MIT

Loading…

Code

<label class="ui-bookmark">
  <input type="checkbox" />
  <div class="bookmark">
    <svg viewBox="0 0 32 32">
      <g>
        <path
          d="M27 4v27a1 1 0 0 1-1.625.781L16 24.281l-9.375 7.5A1 1 0 0 1 5 31V4a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4z"
        ></path>
      </g>
    </svg>
  </div>
</label>

Prompt

Build "Click", 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 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/neerajbaniwal/rotten-dingo-46 (neerajbaniwal, MIT).