20 CSS Link Hover Effect Designs
Advertisement
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.
01 / 20
Squiggly Underline
Pure CSS 
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.
02 / 20
Tilde Morph
Pure CSS 
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.
03 / 20
Dotted Focus Ring
Pure CSS 
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.
04 / 20
Encircled
Pure CSS 
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.
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. Adapted from Aaron Iker — works on multi-line links thanks to background-image underline.
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. The link reads as "ready for input" without any text flicker.
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. Finite, intentional, premium.
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. The link itself stays static. Reads as live-signal / new content.
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. Two-stage motion in a single hover.
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.
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. Reads as a real marker pen, not a geometric block.
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. Reads like a film cut.
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. Terminal/hacker aesthetic — perfect for dev portfolios.
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. Honours prefers-reduced-motion.
15 / 20
Ink Bleed Underline
Pure CSS 
Hand-drawn-look SVG underline that strokes in from left to right on hover via stroke-dasharray. Reads as ink bleeding into paper.
16 / 20
Magnetic Pull
Pure CSS 
Link text drifts horizontally as if magnetically pulled, while a thin underline draws in beneath. A small tactile touch that signals interactivity.
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. Mono font — perfect for CLIs and dev portfolios.
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. Brutalist design system fixture.
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. Uses transform-style: preserve-3d and backface-visibility.
Advertisement
FAQ
Frequently asked questions
How do I create a CSS link hover effect?
The minimum is a real <a> 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 <a> 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
21 CSS Button Hover Effects
21
21 original CSS button hover effects — liquid fill, glitch, neon pulse, 3D flip, particle burst and more. Pure CSS with 3 vanilla JS enhancements. Copy-paste ready.
buttons hover animation
Responsive
27 CSS Card Hover Effects
27
27 original CSS card hover effects — elastic lift, 3D tilt, holographic shimmer, spotlight, aurora and more. Pure CSS with 4 vanilla JS enhancements. Copy-paste ready.
cards hover animation
Responsive
15 Pure CSS Loading Animations
15
15 hand-coded CSS loading animations — DNA helix, liquid blob, orbit system, neon ring, hourglass flip, listing skeleton, building loader and more. Pure CSS, drop-in ready.
loading spinner animation
Responsive