20 CSS Link Hover Effect Designs

motion css-only interactive

A CSS link hover effect is the motion or underline animation that fires when a pointer enters an anchor. These 20 hand-coded effects are ready-to-ship link styles for navigation menus, in-body text, and footers — copy the CSS, attach to your existing anchors, and ship.

20 unique effects 100% copy-paste ready Published May 4, 2026

01 / 20

Squiggly Underline

Pure CSS

Hand-drawn-look squiggly SVG underline that draws in beneath the link on hover via stroke-dasharray.

Best fornavigation, blog headers, and personality-forward sites.

Live Demo Try it

02 / 20

Tilde Morph

Pure CSS

A straight underline morphs into a tilde-style wave on hover via background-image swap.

Live Demo Try it

03 / 20

Dotted Focus Ring

Pure CSS

A dotted box outline appears around the link on hover, paired with a blinking trailing caret.

Live Demo Try it

04 / 20

Encircled

Pure CSS

An SVG ellipse strokes itself around the linked text on hover via stroke-dasharray — a pen circling a phrase.

Live Demo Try it

05 / 20

Chevron Companion

Pure CSS

On hover the underline retracts from right-to-left while a chevron arrow "draws in" via stroke-dasharray with a spring overshoot.

Live Demo Try it

06 / 20

Cursor Blink Underline

Pure CSS

Link text stays solid; only a CLI-style cursor caret bar underneath blinks at the exact 60bpm cadence terminals use.

Live Demo Try it

07 / 20

Neon Sign Flicker

Pure CSS

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.

Live Demo Try it

08 / 20

Heartbeat Pulse

Pure CSS

A leading dot pulses with a real medical-grade heartbeat rhythm — lub-DUB-pause-lub-DUB-pause via a multi-keyframe @keyframes.

Live Demo Try it

09 / 20

Reveal Sweep

Pure CSS

A thin gradient line sweeps across the link from left to right on hover, then settles as a permanent underline.

Live Demo Try it

10 / 20

Letter Push

Pure CSS

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

Live Demo Try it

11 / 20

Marker Highlighter

Pure CSS

A pale highlight expands from 0% to 100% width behind the text on hover, with a hand-drawn-look SVG fill.

Live Demo Try it

12 / 20

Background Slide

Pure CSS

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

Live Demo Try it

13 / 20

Crosshair Brackets

Pure CSS

Mono [ and ] brackets appear on either side of the link on hover, drawing in via a tiny scale-overshoot.

Live Demo Try it

14 / 20

Glitch Split

Pure CSS

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

Live Demo Try it

15 / 20

Ink Bleed Underline

Pure CSS

Hand-drawn-look SVG underline that strokes in from left to right on hover via stroke-dasharray.

Live Demo Try it

16 / 20

Magnetic Pull

Pure CSS

Link text drifts horizontally as if magnetically pulled, while a thin underline draws in beneath.

Live Demo Try it

17 / 20

Caret Companion

Pure CSS

A blinking terminal cursor ▌ appears at the end of the link on hover, with a thin underline drawing in.

Live Demo Try it

18 / 20

Brutalist Block

Pure CSS

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

Live Demo Try it

19 / 20

3D Flip Reveal

Pure CSS

Link face flips 180° on the Y axis on hover, revealing a different call-to-action on the back.

Live Demo Try it

20 / 20

Type-On Reveal

Pure CSS

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

Live Demo Try it

FAQ

Frequently asked questions

How do I create a CSS link hover effect?

The minimum is a real element with a class, and a transition declared on the property you want to animate (color, border-color, transform, opacity). Then use a:hover, a:focus-visible to define the end state. Most animated effects in this gallery use a ::before or ::after pseudo-element absolutely positioned beneath the text, animated via transform/scale/width on hover.

Should I use :hover or :focus-visible for link effects?

Both — always together. :hover handles mouse users; :focus-visible handles keyboard users and screen readers. If you only style :hover, your link is invisible to keyboard navigation. Every demo in this gallery declares both pseudo-classes on the same rule so the effect fires for all input methods.

Are these CSS link effects accessible?

Yes. Each demo uses a real element with proper :focus-visible states, sufficient colour contrast (4.5:1 minimum), and text that's readable both before and after the effect runs. Continuous animations (glitch, blinking caret, dotted-ring caret, cursor-blink, heartbeat, type-on) honour the prefers-reduced-motion media query — animations stop and end-states are shown immediately for users who request reduced motion.

Aren't blinking links bad for accessibility?

Blinking text content can be — that's why these blink demos are designed to be safe. The cursor-blink puts the blink on a small underline bar, not the readable text. The neon flicker is a finite ~1 second event on hover, not a perpetual flash. The heartbeat pulses a small leading dot, not the link itself. All three honour prefers-reduced-motion and stay well under WCAG's 3-flashes-per-second threshold.

Do these link effects work on touch devices?

On touch devices the :hover state fires briefly on tap before the page navigates, so users see a flash of the effect. For touch-first patterns prefer effects that complete quickly (under 300ms) or use :focus-visible-only effects that require deliberate keyboard focus. The brutalist-block, 3D flip, chevron-companion, neon-sign flicker, and type-on reveal effects work especially well on touch because they're tied to a CTA, not just decoration.

Can I use these effects in any framework?

Yes. Each demo is plain HTML and CSS (no JavaScript) with no dependencies. Drop the markup into React (with className), Vue, Svelte, Astro or static HTML — the styles work as-is. MIT licensed.

Related collections

20 CSS Animated Buttons

20 hand-coded CSS animated buttons — neon glow, ripple, 3D press, liquid fill, jelly bounce, shine sweep, animated border, moving gradient CTA, text flip, submit success state, add-to-cart progress, download icon, hamburger-to-close, toggle switch, loading spinner inside button, next/prev arrow nav, and ghost button background reveal. Half pure CSS, half lightweight JS for production interactions.

css animated buttons animated button css css button animation Responsive

15 CSS Background Animations

15 hand-coded CSS background animations with live demos — infinite shifting gradient, floating particle bubbles, parallax starry night, clickable cyberpunk ripple, sliding geometric grid, SVG wave overlays, glassmorphism orbs, aurora borealis ribbons, matrix digital rain, mesh gradient blobs, falling snow, morphing blob, retro synthwave 3D grid, infinite scrolling diagonal marquee, comic-book halftone dots. 100% Pure CSS, no JavaScript, no canvas, no particles.js. prefers-reduced-motion respected, scoped class names, MIT-licensed.

css background animation animated gradient background css css floating particles Responsive

27 CSS Button Hover Effects

27 hand-coded CSS button hover effects — 3D press, neon glow, gradient slide, border draw, liquid fill, ripple, glitch text, and kinetic flips. Every demo is pure CSS (no JavaScript, no framework), tuned for 60fps with transform and opacity, and respects prefers-reduced-motion out of the box.

css buttons button hover button hover effects Responsive