Icon

Source: Uiverse ↗
Author: KingHendrie
Licence: MIT

Loading…

Code

<input type="checkbox" id="send-checkbox" class="send-checkbox" />
<label for="send-checkbox" class="send-button">
  <svg
    class="svg-style"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    height="20px"
    width="20px"
  >
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="#292D32"
      d="M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z"
    ></path>
    <path
      stroke-linejoin="round"
      stroke-linecap="round"
      stroke-width="1.5"
      stroke="#292D32"
      d="M10.11 13.6501L13.69 10.0601"
    ></path>
  </svg>
  <span class="message">Send Message</span>
  <span class="message-sent">Message Sent</span>
</label>

Prompt

Build "Icon", a button 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/KingHendrie/heavy-wombat-40 (KingHendrie, MIT).