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. It makes it more enjoyable to click. So here are 36 CSS Link Styles & Hover Effects that you can use for inspiration to enhance the user experience of navigating your website or app.
Links / Buttons hover animations

Pen By Thomas Aufresne
Slice link text

Pen By Mattia Astorino
Text animation

Pen By Yoann
Arrowed link – circle on hover

Pen By Alex Jolly
Pure CSS Single Element Link Styles

Pen By Matthew Shields
The “Read more” link

Pen By Stas Melnikov
New Link Underline (Wired-Style)

Pen By MrPirrera
Link hover effect from factmag

Pen By Jason Carlin
Flag # links!

Pen By Natalya
Link Style Experiments

Pen By Lindsey
Link with gradient background on hover

Pen By Giulia Malaroda
Link Effect – Squiggle

Pen By Geoff Graham
Simple, UX friendly pure-css links that open in a new tab

Pen By Antariano
Towards a more perfect link underline

Pen By Andrew Patton
Cool (and easy) animated underline links.

Pen By Marcus Burnette
Rolling Links

Pen By Hakim El Hattab
Animated font weight on hover

Pen By Jesper Strange Klitgaard Christiansen
Social Links in a List (Clean Hover)

Pen By _MRK
Link hover shine effect

Pen By Max Glenister
Guitar String Link Underlines

Pen By James Almeida
text-decoration: underline animated

Pen By Kseso
Strikethrough hover-effect

Pen By Artyom
My favorite link hover styles

Pen By rtrsmarian
Link Hover Arrow Idea

Pen By Gabrielle Wee
Animated external link icon

Pen By Krz Szzz
Menu hover effect

Pen By Jason Hee
How do I get a custom colored underline that will span multiple lines?

Pen By Will King
nth-everything css

Pen By Fabrice Weinberg
Link Hover Effects

Pen By Peiwen Lu
Data-Hover Menu

Pen By Santiago Moreno
SVG Animation

Pen By Sean McCaffery
Link Hover Effects w/ mo.js

Pen By Mike Quinn
Simple CSS text animation

Pen By Nooray Yemon
Text hover effect

Pen By Nick Pearson
Subtle link animations.

Pen By Josip Psihistal
Heading link animation

Pen By Sonja Strieder