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).