Collection of hand-picked free HTML and CSS link effect code examples with :hover and :active state. Update of February 2020 collection. 13 new items.

Related Articles

  1. CSS Breadcrumbs
  2. CSS Arrows

Author

  • JFarrow

Made with

  • HTML / CSS (SCSS)

About a code

Laser Revealed Title Link

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Laser Revealed Title Link

Author

  • Will Boyd

Made with

  • HTML / CSS

About a code

Displaying Link URLs

How to display the href attribute of a link next to the link text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mary Lou

Made with

  • HTML / CSS

About a code

Simple CSS Line Hover Animations for Links

A couple of simple & subtle CSS-based line hover animations for links.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shunya Koide

Made with

  • HTML / CSS

About a code

CSS Link Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML / CSS (SCSS)

About a code

Animated SVG Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Link Hover Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jhey

Made with

  • HTML / CSS

About a code

Variable Powered Underline Transition

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Cojea Gabriel

Made with

  • HTML / CSS

About a code

Underline Animation - Link

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Sikriti Dakua

Made with

  • HTML / CSS (SCSS)

About a code

Link Hover Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

Link Hover Flash

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Aaron Iker

Made with

  • HTML / CSS (SCSS)

About a code

Underline Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Katherine Kato

Made with

  • HTML / CSS (SCSS)

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Eina O

Made with

  • HTML / CSS

About a code

Underline Link Effect

Animated underline/border link effect. Edit transform-origin to change how where the animation starts. It's currently set to left.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Half-transparent CurrentColor Link Underline

Author

  • Christopher Kirk-Nielsen

Made with

  • HTML / CSS

About a code

Half-transparent CurrentColor Link Underline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mark

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Spring/Bounce Hover Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Link Styling

Author

  • Sil van Diepen

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Link Styling

Link styling exploration without classes.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • Stas Melnikov

Made with

  • HTML / CSS

About the code

Interactive Elements

CSS animations for interactive elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: r-button.css, r-link.css

Author

  • Stas Melnikov

Made with

  • HTML / CSS

About the code

HTML and CSS Link Effect

The "Read more" link effect in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Flag # links!

Author

  • Natalya

Made with

  • HTML / CSS (SCSS)

About the code

Flag # links!

Broken link styles. Flag # links with CSS! Never forget a href="#" placeholder again!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Geoff Graham

Made with

  • HTML / CSS

About the code

Link Effect

HTML and CSS link squiggle effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Giulia Malaroda

Made with

  • HTML / CSS

About the code

Link with Gradient Background

Link with gradient background on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • auginator

Made with

  • HTML / CSS (SCSS)

About a code

CSS3 Keyframes Animation Link Style

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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.

Author

  • Misha Heesakkers

Made with

  • HTML / CSS (PostCSS)

About the code

Text Underline Hover Effects

Quick experiments with :before & :after hover effects on single line elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Arrow Link

Author

  • Nicolas Udy

Made with

  • HTML
  • CSS/PostCSS

About the code

Arrow Link

Arrow link :hover effect.

Author

  • Jens Lettkemann

Made with

  • HTML / CSS (SCSS)

About a code

SCSS Link Hover Animations

Hyperlink :hover CSS animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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