Post thumbnail: 12 CSS Link Styles

Tags      link css examples

12 CSS Link Styles

Collection of hand-picked free HTML and CSS link styles with little JavaScript. Demo and download code (*zip).

Demo Image: Underline Hover
Demo GIF: Underline Hover

Underline Hover

HTML and CSS underline hover effect.
Made by Elwin van den Hazel
July 12, 2017

Demo Image: Animate underline Wavy
Demo Image: Animate Underline Wavy

Animate Underline Wavy

That cool wiggly underline that people like.
Made by David Darnes
July 10, 2017

Demo Image: Fancy Text-Shadow Link Underline
Demo Image: Fancy Text-Shadow Link Underline

Fancy Text-Shadow Link Underline

HTML and CSS fancy text-shadow link underline.
Made by Ryan
July 1, 2017

Demo Image: Follow Along Links
Demo GIF: Follow Along Links

Follow Along Links

Hover on the links and it follows the cursor, highlighting the links as you go!
Made by Katherine Kato
June 23, 2017

Demo Image: Pure CSS Single Element Link Styles
Demo GIF: Pure CSS Single Element Link Styles

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 by Matthew Shields
June 24, 2017

Demo Image: Strikethrough Hover Effect
Demo Image: Strikethrough Hover Effect

Strikethrough Hover Effect

Hover effect for links. Use only one pseudo-element on link.
Made by Artyom
June 23, 2017

Demo Image: Jumping Link Hovers
Demo GIF: Jumping Link Hovers

Jumping Link Hovers

Jumping link hovers with HTML and CSS.
Made by Bennett Feely
June 19, 2017

Demo Image: Arrowed Link
Demo GIF: Arrowed Link

Arrowed Link

Arrowed link - circle on hover (cf Google home website).
Made by Alexandre Jolly
May 21, 2017

Demo Image: Anchor Hover Effects
Demo GIF: Anchor Hover Effects

Anchor Hover Effects

Testing out some hover effects for anchor tags in body typography using CSS pseudo elements.
Made by Simon Gooder
May 29, 2016

Demo Image: Anchor Click Canvas Animation
Demo GIF: Anchor Click Canvas Animation

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.
Made by Nick Sheffield
May 3, 2016

Demo Image: Subtle Link Animations
Demo GIF: Subtle Link Animations

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.
Made by Josip Psihistal
October 21, 2014

Demo Image: Link Hover Effects
Demo GIF: Link Hover Effects

Link Hover Effects

8 CSS link hover effects.
Made by Peiwen Lu
April 4, 2014

Back to top