Top 33 CSS Link Hover Effects

May 13, 2020

LINK FILL ON HOVER

Link hover effects that fill a link with an underline or line-through using CSS transitions and the clip-path property.

UNDERLINE LINK EFFECT

Animated underline/border link effect. Edit transform-origin to change how where the animation starts. It’s currently set to left.

HALF-TRANSPARENT CURRENTCOLOR LINK UNDERLINE

SPRING/BOUNCE HOVER EFFECT

LINK STYLING

Link styling exploration without classes.

INTERACTIVE ELEMENTS

CSS animations for interactive elements.

HTML AND CSS LINK EFFECT

The “Read more” link effect in HTML and CSS.

FLAG # LINKS!

Broken link styles. Flag # links with CSS! Never forget a href="#" placeholder again!

LINK EFFECT

HTML and CSS link squiggle effect.

LINK WITH GRADIENT BACKGROUND

Link with gradient background on hover.

ANIMATED FONT WEIGHT ON HOVER

Thin link turns bold.

MULTI-LINE LINK

Multi-line link hover effect.

LINK ARROW

Link hover arrow idea.

GRADIENT UNDERLINE ANIMATION

Using a css background gradient and css animation this allows the animation of a link underline to carry across multiple lines. This previously would be achieved using the :pseudo elements. However doing this over multiple lines proved tricky.

COOL HOVER EFFECT WITH MIX-BLEND-MODE

This is cool because you don’t need to change the color of the link on :hover. The mix-blend-mode in the ::after will invert it for you.

Underline Hover

HTML and CSS underline hover effect.

Demo and Download

Animate Underline Wavy

That cool wiggly underline that people like.

Demo and Download

Fancy Text-Shadow Link Underline

HTML and CSS fancy text-shadow link underline.

Demo and Download

Follow Along Links

Hover on the links and it follows the cursor, highlighting the links as you go!

Demo and Download

Pure CSS Single Element Link Styles

Inspired by things that have seen from Medium and other peoples pens but with an added attempt at bringing in some animation. Currently limited to a link that is in total 10000px wide across all lines.

Demo and Download

Strikethrough Hover Effect

Hover effect for links. Use only one pseudo-element on link.

Demo and Download

Jumping Link Hovers

Jumping link hovers with HTML and CSS.

Demo and Download

Arrowed Link

Arrowed link – circle on hover (cf Google home website).

Demo and Download

LINK ANIMATION

Link animation on hover.

LINKS WITH MARGINALIA NOTES

A second attempt to create an accessible and more fully-responsive version of the link style used in https://thecorrespondent.com

Anchor Hover Effects

Testing out some hover effects for anchor tags in body typography using CSS pseudo elements.

Demo and Download

LINK HIGHLIGHT HOVER/CLICK EFFECT

CSS background transition to add a highlight effect on hover/click of a link.

TEXT UNDERLINE HOVER EFFECTS

Quick experiments with :before & :after hover effects on single line elements.

ARROW LINK

Arrow link :hover effect.

Anchor Click Canvas Animation

The canvas’s are positioned absolutely, and use the svg css pointer-events property so you don’t have the canvas blocking your clicks.

Demo and Download

LINK IDEAS (PROOF OF CONCEPT)

Cool CSS3 link ideas.

Subtle Link Animations

Nothing major, nothing overly fancy. Just a few subtle, yet obvious text-link CSS animations. More a reference than anything ground-breaking.

Demo and Download

Link Hover Effects

8 CSS link hover effects.

Demo and Download