A Collection of hand-picked free HTML and CSS link effect examples with :hover and :active state.

Links are the most basic interactive component between a user and a web page. They are so important, yet easily get lost in the midst of newer and shinier UI elements. Using nice CSS link style and hover effect will help to communicate to the user in a visual and meaningful way that this text is actionable.

1.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.

Made with

1
HTML / CSS (SCSS)

Author

1
Katherine Kato

Demo

See the Pen Link Fill on Hover by Katherine Kato (@kathykato) on CodePen.


2.UNDERLINE LINK EFFECT

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

Made with

1
2
Html
Css/SCSS

Author

1
Eina O

Demo


3.HALF-TRANSPARENT CURRENTCOLOR LINK UNDERLINE

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Christopher Kirk-Nielsen

Demo


4.SPRING/BOUNCE HOVER EFFECT

Made with

1
HTML (Pug) / CSS (SCSS)

Author

1
Mark

Demo


5.LINK STYLING

Link styling exploration without classes.

Made with

1
HTML (Pug) / CSS (SCSS)

Author

1
Sil van Diepen

Demo


6.INTERACTIVE ELEMENTS

CSS animations for interactive elements.

Made with

1
HTML / CSS

Author

1
Stas Melnikov

Demo


7.HTML AND CSS LINK EFFECT

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

Made with

1
HTML / CSS

Author

1
Stas Melnikov

Demo


8.FLAG # LINKS!

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

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Natalya

Demo

See the Pen Flag # links! by Natalya (@tallys) on CodePen.


9.LINK EFFECT

HTML and CSS link squiggle effect.

Made with

1
HTML / CSS

Author

1
Geoff Graham

Demo


10.LINK WITH GRADIENT BACKGROUND

Link with gradient background on hover.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Giulia Malaroda

Demo

See the Pen #0001 • Link with gradient background on hover by Giulia Malaroda (@giuliamalaroda) on CodePen.


11.ANIMATED FONT WEIGHT ON HOVER

Thin link turns bold.

Made with

1
2
Html
Css/SCSS

Author

1
Jesper Strange Klitgaard Christiansen

Demo

See the Pen Animated font weight on hover by Jesper Strange Klitgaard Christiansen (@jesperkc) on CodePen.


12.MULTI-LINE LINK

Multi-line link hover effect.

Made with

1
2
Html
Css/SCSS

Author

1
Antoinette Janus

Demo

See the Pen Multi-line Link Hover Effect by Antoinette Janus (@internette) on CodePen.


13.LINK ARROW

Link hover arrow idea.

Made with

1
2
Html
Css/SCSS

Author

1
Gabrielle Wee

Demo

See the Pen Link Hover Arrow Idea by Gabrielle Wee 🧧 (@gabriellewee) on CodePen.


14.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.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Colin Horn

Demo

See the Pen Gradient Underline Animation by Colin Horn (@colinhorn) on CodePen.


15.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.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
2
Author
Tiago Alexandre Lopes

Demo

See the Pen Cool hover effect with mix-blend-mode by Tiago Alexandre Lopes (@TiagoLopes) on CodePen.


16.Underline Hover

HTML and CSS underline hover effect.

Made with

1
2
Html
Css/SCSS

Author

1
Elwin van den Hazel

Demo

See the Pen Underline hover test by Elwin van den Hazel (@elwinvdhazel) on CodePen.


17.Animate Underline Wavy

That cool wiggly underline that people like.

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
David Darnes

Demo

See the Pen Animate underline wavy by David Darnes (@daviddarnes) on CodePen.


18.Fancy Text-Shadow Link Underline

HTML and CSS fancy text-shadow link underline.

Made with

1
2
Html
Css/SCSS

Author

1
Ryan

Demo

See the Pen Fancy text-shadow link underline by Ryan (@jryantaylor) on CodePen.


19.Follow Along Links

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

Made with

1
2
Html
Css/SCSS

Author

1
Katherine Kato

Demo

See the Pen #JavaScript30 Day 22: Follow Along Links by Katherine Kato (@kathykato) on CodePen.


20.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.

Made with

1
2
Html
Css/SCSS

Author

1
Matthew Shields

Demo

See the Pen Pure CSS Single Element Link Styles by Matthew Shields (@MatthewShields) on CodePen.