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