Baktiyar Ablaikhan

Link

Source
Uiverse ↗
Author
elijahgummer
Licence
MIT

Loading…

Code

<input class="toggle-checkbox" id="toggle-checkbox" type="checkbox" />
<label class="button" for="toggle-checkbox">
  <div class="content">
    <span class="letters">
      <span style="--i: 1" data-label="C">C</span>
      <span style="--i: 2" data-label="o">o</span>
      <span style="--i: 3" data-label="p">p</span>
      <span style="--i: 4" data-label="y">y</span>
      <span style="--i: 5" data-label="L">L</span>
      <span style="--i: 6" data-label="i">i</span>
      <span style="--i: 7" data-label="n">n</span>
      <span style="--i: 8" data-label="k">k</span>
    </span>
    <div class="icon-container">
      <svg
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.6"
        fill="none"
        data-slot="icon"
        class="icon"
      >
        <path
          class="bm"
          d="M12.0017 6V4M8.14886 7.40371L6.86328 5.87162M15.864 7.40367L17.1496 5.87158"
        ></path>
        <path
          d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
          stroke-linejoin="round"
          stroke-linecap="round"
          class="link"
        ></path>
      </svg>
    </div>
  </div>
</label>
Prompt

Build "Link", 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 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/elijahgummer/fluffy-gecko-12 (elijahgummer, MIT).