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
HTML / CSS (SCSS)
Author
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
Html
Css/SCSS
Author
Eina O
Demo
See the Pen Underline Link Effect by Eina O
(@thelittleblacksmith) on CodePen.
3.HALF-TRANSPARENT CURRENTCOLOR LINK UNDERLINE
Made with
Html
Css/SCSS
Javascript
Author
Christopher Kirk-Nielsen
Demo
See the Pen Half-transparent currentColor link underline by Christopher Kirk-Nielsen
(@chriskirknielsen) on CodePen.
4.SPRING/BOUNCE HOVER EFFECT
Made with
HTML (Pug) / CSS (SCSS)
Author
Mark
Demo
See the Pen Spring/Bounce Hover Effect by Mark
(@markmead) on CodePen.
5.LINK STYLING
Link styling exploration without classes.
Made with
HTML (Pug) / CSS (SCSS)
Author
Sil van Diepen
Demo
See the Pen Link styling exploration without classes. by Sil van Diepen
(@silvandiepen) on CodePen.
6.INTERACTIVE ELEMENTS
CSS animations for interactive elements.
Made with
HTML / CSS
Author
Stas Melnikov
Demo
See the Pen Animations for interactive elements #2 by Stas Melnikov
(@melnik909) on CodePen.
7.HTML AND CSS LINK EFFECT
The “Read more” link effect in HTML and CSS.
Made with
HTML / CSS
Author
Stas Melnikov
Demo
See the Pen The “Read more” link by Stas Melnikov
(@melnik909) on CodePen.
8.FLAG # LINKS!
Broken link styles. Flag # links with CSS! Never forget a href=”#” placeholder again!
Made with
Html
Css/SCSS
Javascript
Author
Natalya
Demo
See the Pen Flag # links! by Natalya (@tallys)
on CodePen.
9.LINK EFFECT
HTML and CSS link squiggle effect.
Made with
HTML / CSS
Author
Geoff Graham
Demo
See the Pen Link Effectz – Squiggle by Geoff Graham
(@geoffgraham) on CodePen.
10.LINK WITH GRADIENT BACKGROUND
Link with gradient background on hover.
Made with
Html
Css/SCSS
Javascript
Author
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
Html
Css/SCSS
Author
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
Html
Css/SCSS
Author
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
Html
Css/SCSS
Author
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
Html
Css/SCSS
Javascript
Author
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
Html
Css/SCSS
Javascript
Author
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
Html
Css/SCSS
Author
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
Html
Css/SCSS
Javascript
Author
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
Html
Css/SCSS
Author
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
Html
Css/SCSS
Author
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
Html
Css/SCSS
Author
Matthew Shields
Demo
See the Pen Pure CSS Single Element Link Styles by Matthew Shields (@MatthewShields)
on CodePen.