Post thumbnail: 22 CSS Link Styles

22 CSS Link Styles

Collection of hand-picked free HTML and CSS link style code examples. Update of August 2017 collection. 10 new items.

Related Articles

  1. CSS Breadcrumbs

  2. CSS Arrows

Demo image: Animated Font Weight On Hover

Author

  • Jesper Strange Klitgaard Christiansen

Made with

  • HTML
  • CSS/SCSS

About the code

Animated Font Weight On Hover

Thin link turns bold.

Demo image: Multi-line Link

Author

  • Antoinette Janus

Made with

  • HTML
  • CSS/SCSS

About the code

Multi-line Link

Multi-line link hover effect.

Demo image: Link Arrow

Author

  • Gabrielle Wee

Made with

  • HTML
  • CSS/SCSS

About the code

Link Arrow

Link hover arrow idea.

Demo image: Gradient Underline Animation

Author

  • Colin Horn

Made with

  • HTML
  • CSS/SCSS

About the code

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.

Demo image: Cool Hover Effect With mix-blend-mode

Author

  • Tiago Alexandre Lopes

Made with

  • HTML
  • CSS

About the code

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.

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: Link Animation

Author

  • Sonja Strieder

Made with

  • HTML
  • CSS/SCSS

About the code

Link Animation

Link animation on hover.

Demo image: Links with Marginalia Notes

Author

  • Amelia Bellamy-Royds

Made with

  • HTML
  • CSS

About the code

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

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: Link Highlight Hover/Click Effect

Author

  • Emily Hayman

Made with

  • HTML
  • CSS/SCSS

About the code

Link Highlight Hover/Click Effect

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

Demo image: Arrow Link

Author

  • Nicolas Udy

Made with

  • HTML
  • CSS/PostCSS

About the code

Arrow Link

Arrow link :hover effect.

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: Link Ideas (Proof Of Concept)

Author

  • Brenden Palmer

Made with

  • HTML
  • CSS

About the code

Link Ideas (Proof Of Concept)

Cool CSS3 link ideas.

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