AI CSS Animations

CSS Link Hover Effects

37 CSS link hover effects and underline animations: sliding, growing, wavy and gradient underlines, highlights, arrows, brackets and navigation menu hovers.

Underline Grow Link

An underline draws in from the left on hover and retreats the same way. The line is a pseudo-element scaled on X, which is smoother and cheaper than animating width.

link · underline · tailwind

Underline from Center Link

The same drawn underline, but it grows outward from the middle. Only the transform origin changes, which makes it a good companion to the left-to-right version.

link · underline

Highlighter Link

A translucent highlighter stroke fills in behind the text from left to right, like someone running a marker across it. Done with an animated background size.

link · fill

Slide Up Text Link

The link text rolls up and out while an identical copy rolls in from below in the accent color. The copy comes from a data attribute, so the markup stays a single word.

link · text

Arrow Link

A 'Read more' link whose arrow slides right on hover. The lightest possible affordance for a text link that leads somewhere.

link · icon · minimal · tailwind

Strike Through Link

A line draws through the middle of the text on hover while the text fades. Good for 'compare plans' style toggles and nav items that mean 'not this one'.

link · underline

Bracket Link

Square brackets slide in from either side to wrap the text, a nod to terminal and code aesthetics. The brackets are pseudo-element content, so they never touch the copy.

link · text · playful

Underline to Fill Button

A text button with a short underline that grows up and out into a full rounded fill on hover. One clip-path inset() that interpolates its edges and its corner radius together.

button · fill · underline · minimal

Blog Card Hover

A horizontal blog card: the thumbnail pushes in, the headline gets an underline that runs line by line, and the read link arrow nudges. The underline is a background on an inline span.

card · underline · image

Arrow Link Card Hover

A whole-card link whose corner arrow flies out to the top right while a fresh one slides in from the bottom left, and the circle behind it fills. Two copies of one SVG do the swap.

card · link · icon

Wavy Underline Link Hover

A flat hairline under the link wipes into a wavy line that keeps flowing sideways while hovered. The wave is a tiny SVG used as a CSS mask, so it takes the accent color.

link · underline · playful

Gradient Underline Link Hover

A thin two-tone gradient underline that thickens with a small spring and starts running along its length on hover. The second hue is rotated from the accent with relative color syntax.

link · underline · gradient

Double Underline Link Hover

A plain underlined link whose line splits in two on hover: a copy drops below with a springy overshoot and a softer tint. Two pseudo-elements stacked on the same spot at rest.

link · underline · minimal

Underline to Background Link Hover

The underline swells upward into a solid block behind the text, which flips to white. One pseudo-element scaled on Y from the bottom edge, so it animates on the compositor.

link · underline · fill · tailwind

Dotted to Solid Underline Link Hover

A dotted underline whose dots stretch into dashes and close up into a solid line on hover. The dash length is a registered @property, so the gradient stop can transition.

link · underline · minimal

Underline Slide Through Link Hover

The resting underline exits to the right while a fresh one enters from the left, and it keeps travelling the same way when you leave. Flipping transform-origin per state does it.

link · underline

Overline and Underline Link Hover

Two faint rules frame the link at rest. On hover an accent line runs across the top from the left while the bottom one runs in from the right, a beat behind, so they cross.

link · underline · border

Dot to Underline Link Hover

A small dot sits under the middle of the link and stretches into a full underline with an elastic overshoot, thinning as it grows. A rounded clip-path inset morphs dot to pill.

link · underline · playful

Hand Drawn Underline Link Hover

A loose marker swoosh draws itself under the link on hover and rewinds when you leave. An inline SVG path with pathLength set to 1, so the dash offset math never changes.

link · underline · playful

Corner Border Link Hover

Two corner marks bracket the link at rest and stretch along the edges until they close into a full box on hover. Four gradient layers on the link itself, no extra elements.

link · border · minimal

External Link Arrow Hover

The north-east arrow beside an outbound link shoots out of its badge while a fresh copy slides in from the opposite corner, and the badge fills in. Two SVG arrows in a clipped circle.

link · icon

Arrow Reveal Footer Link Hover

Quiet footer links that brighten on hover while an arrow slides in from the left and nudges the label over. The arrow is absolutely placed, so the list never reflows.

link · icon · minimal · tailwind

Link Preview Tooltip Hover

Hovering a link pops a small card above it showing where it goes, with a favicon dot and a caret. The URL comes from a data attribute, so each link needs one extra attribute.

link · reveal · shadow

Thick Underline Link Hover

A real text-decoration underline that tucks up under the letters and thickens into a marker bar on hover. It animates native properties, so it wraps across lines like any link.

link · underline · minimal · tailwind

Arrow Underline Link Hover

An underline draws under the text, runs on past the last letter and grows an arrowhead, so the link points where it goes. The head is a rotated border corner that waits for the line.

link · underline · icon

Block Swipe Link Hover

A solid block sweeps across the link from the left, covers it for a beat and leaves to the right, and the text underneath has changed color. One keyframe with a mid-way origin flip.

link · fill · reveal

Multiline Underline Link Hover

An inline link inside a paragraph whose underline draws line by line when the link wraps, finishing one row before starting the next. It is background-size on an inline element.

link · underline · text · tailwind

Waving Hand Link Hover

A waving hand emoji pops out beside a contact link on hover and keeps waving from the wrist. The pop is a transition on transform, the wave animates the separate rotate property.

link · icon · playful

Directional Underline Nav Hover Effect

Move across the menu and the old underline retracts toward the new item while the new one grows from that side. Sibling selectors set transform-origin, a delayed transition holds it.

menu · underline

Gliding Underline Nav Hover Effect

An underline glides under whichever item you hover, trailed by a slower faint echo, then settles back under the current page. Two pseudo-elements share one :has() driven offset.

menu · underline

Knockout Text Hover Effect

A solid block with the word punched clean through it. On hover the block drops into an underline and the letters fill back in. An SVG mask cuts the holes, so any background shows through.

text · reveal · underline

Underline to Strikethrough Hover

A thick underline slides up through the word and becomes a strikethrough while the text fades, like ticking off a to-do. One pseudo-element moves on translateY; nothing is redrawn.

text · underline · tailwind

Collapsed Breadcrumb Hover

A long breadcrumb folded into an ellipsis that unfolds into the hidden levels on hover or focus. Two one-column grids animate 1fr to 0fr and back, so no width is hard-coded.

link · menu · reveal

Tag Cloud Hover Effect

Hashtags in mixed sizes that each pop, tilt their own way and fill with the accent when hovered. Every tag carries its size and tilt as two custom properties in its style attribute.

link · playful · fill · tailwind

Hang Hover Effect

A sale tag on a cord drops on hover, then bobs on it like a bungee while the cord stretches to match. The tag and the cord run twin animations with the same timing, so they never drift apart.

link · playful

Underline Reveal Hover Effect

A thick accent bar slides up into the bottom edge of a tinted button, the way a tab marks itself active. Move the bar to the top edge and flip the direction for Hover.css Overline Reveal.

button · underline

Forward and Backward Hover Effect

Previous and Next buttons that nudge the way they point on hover, with the chevron moving a little further than the button. Hover.css Forward and Backward, paired the way you would use them.

button · link · icon

How to use these link hover effects

Open any effect, copy the HTML into your markup and the CSS into your stylesheet. Nothing else is required: no JavaScript, no libraries. Classes are prefixed per effect so several can share a page.

To change the color, set --hfx-color on the element or any ancestor. To change the size, set --hfx-size: every dimension inside is in em, so padding, radii and offsets scale together.

Every snippet ships with a prefers-reduced-motion rule that disables the movement for people who asked their OS for less of it. The hover state still applies, only the transition is skipped.