55+ CSS Link Hover Effects - Free Code + Demos

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

Animated underline/border link effect. I keep forgetting how to do this, so I made this little reminder for myself.

Animated underline/border link effect. I keep forgetting how to do this, so I made this little reminder for myself.

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.

A second attempt to create an accessible and more fully-responsive version of the link style used in The Correspondent. Compare with my first version, here. The main problem with the original is aria-hidden, but I went beyond that, removing the duplicated markup (for the widescreen vs n...

Read More

CSS background transition to add a highlight effect on hover / click of a link. Background from: https://getstream.io/

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

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

These have been made to specifically be a single element link - use of pseudo but no wrapping spans here. Pure CSS approach. Going to keep updating and browser testing them too.

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

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

Proof of concept for something I've always known was possible, but never got around to doing. I'm creating temporary canvas's based on mouse position whenever the user clicks a link. Then I do a nice little particle explosion. The canvas's are positioned absolutely, and use the svg css p...

Read More

Nothing major, nothing overly fancy. Just a few subtle, yet obvious text-link CSS animations. More a reference than anything ground-breaking. (ok, so maybe the heartbeat isn't SO subtle)

This pen shows how CSS gradients can be used to create an animated gradient underline for a link hover state with relative sizing. Link text and underline colour can be changed by updating a single CSS variable.

Looping text underline gradient.

Cool link effects made with SASS.

These days I've been working on Arcadia, a fast and customizable starter for Gatsby and while working on it I found this effect for links. If you want to learn more about Arcadia: https://github.com/danielkvist/gatsby-arcadia-starter

Floating Icons enhances the user experience during special occasions or at times when you are offering some sales or discount. It grabs user attention by greeting the floating icons which are moving across the screen.

When hovering over the link, an arrow animates in from left to right.

This shows how to CSS Transitions to animate your links and also uses Font Awesome icons to show the type of link.

I was browsing rottentomatoes.com on my phone and was a little irked by the hyperlink experience there; one touch on a text hyperlink occasionally triggered the :hover state without actually taking me to what was linked. A little sloppy. But CSS :hover states are cool IMO, so can't we just...

Read More