link icon hover cta inline Tailwind text links with a clearer CTA direction card footer actions or read-more links section links where underline-only feels too passive text links need more direction without turning into buttons icon links often feel static want a tiny motion cue that fits normal Tailwind prose or cards
Icon Shift Link
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/icon-shift-link.json Quick Start
<a class="icon-shift-link text-sm font-semibold text-slate-900" href="#"><span>Read more</span><span class="icon-shift-glyph">→</span></a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 555 bytes · 23 lines
- Custom Properties
-
--icon-shift-distance--icon-shift-duration - Classes
-
.icon-shift-link.icon-shift-glyph
link icon hover cta inline
A tiny but useful CTA pattern for Tailwind projects. The text remains calm, while the trailing icon adds direction and energy on hover without needing a full button treatment.