Playground

Playground · 20 demos

CSS Link Effects Playground

Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.

Or browse the full CSS Link Effects collection for the gallery view with code panels.

Squiggly Underline

Hand-drawn-look squiggly SVG underline that draws in beneath the link on hover via stroke-dasharray. Perfect for navigation, blog headers, and personality-forward sites.

A straight underline morphs into a tilde-style wave on hover via background-image swap. Editorial inline-menu pattern — line on rest, wave on attention.

Dotted Focus Ring

A dotted box outline appears around the link on hover, paired with a blinking trailing caret. Reads as terminal/CLI focus — distinctive without competing with the text.

An SVG ellipse strokes itself around the linked text on hover via stroke-dasharray — a pen circling a phrase. Calm, editorial, and impossible to miss.

Chevron Companion

On hover the underline retracts from right-to-left while a chevron arrow "draws in" via stroke-dasharray with a spring overshoot. Adapted from Aaron Iker — works on multi-line links thanks to background-image underline.

Cursor Blink Underline

Link text stays solid; only a CLI-style cursor caret bar underneath blinks at the exact 60bpm cadence terminals use. The link reads as "ready for input" without any text flicker.

Neon Sign Flicker

On hover the link flickers like a faulty neon sign powering on — irregular opacity stutters via non-uniform steps() keyframes for ~1 second, then settles into a steady glow. Finite, intentional, premium.

Heartbeat Pulse

A leading dot pulses with a real medical-grade heartbeat rhythm — lub-DUB-pause-lub-DUB-pause via a multi-keyframe @keyframes. The link itself stays static. Reads as live-signal / new content.

A thin gradient line sweeps across the link from left to right on hover, then settles as a permanent underline. Two-stage motion in a single hover.

Each letter shifts down 2px on hover with a tiny per-letter stagger via :nth-child — a wave that ripples through the word.

Marker Highlighter

A pale highlight expands from 0% to 100% width behind the text on hover, with a hand-drawn-look SVG fill. Reads as a real marker pen, not a geometric block.

Background Slide

A solid colour slides up from below the baseline, covering the link as the text colour inverts via mix-blend-mode: difference. Reads like a film cut.

Crosshair Brackets

Mono [ and ] brackets appear on either side of the link on hover, drawing in via a tiny scale-overshoot. Terminal/hacker aesthetic — perfect for dev portfolios.

RGB-channel split shudders across the text on hover (cyan + magenta offsets via text-shadow), reading as video corruption. Honours prefers-reduced-motion.

Ink Bleed Underline

Hand-drawn-look SVG underline that strokes in from left to right on hover via stroke-dasharray. Reads as ink bleeding into paper.

Link text drifts horizontally as if magnetically pulled, while a thin underline draws in beneath. A small tactile touch that signals interactivity.

Caret Companion

A blinking terminal cursor ▌ appears at the end of the link on hover, with a thin underline drawing in. Mono font — perfect for CLIs and dev portfolios.

Brutalist Block

Link fills with hot-pink background and gains an offset shadow on hover; click presses it down into the shadow. Brutalist design system fixture.

Link face flips 180° on the Y axis on hover, revealing a different call-to-action on the back. Uses transform-style: preserve-3d and backface-visibility.

Link text appears empty until hover; on hover it types itself character-by-character via a steps() animation with a blinking caret. The CTA itself is the animation.