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.

See the Pen Link Fill on Hover by Katherine Kato (@kathykato) on CodePen.light

Author

  • Katherine Kato

Made with

  • HTML / CSS (SCSS)

UNDERLINE LINK EFFECT

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

See the Pen Underline Link Effect by Eina O (@thelittleblacksmith) on CodePen.light

Author

  • Eina O

Made with

  • HTML / CSS

HALF-TRANSPARENT CURRENTCOLOR LINK UNDERLINE

See the Pen Half-transparent currentColor link underline by Christopher Kirk-Nielsen (@chriskirknielsen) on CodePen.light

Author

  • Christopher Kirk-Nielsen

Made with

  • HTML / CSS

SPRING/BOUNCE HOVER EFFECT

See the Pen Spring/Bounce Hover Effect by Mark (@markmead) on CodePen.light

Author

  • Mark

Made with

  • HTML (Pug) / CSS (SCSS)

LINK STYLING

Link styling exploration without classes.

See the Pen Link styling exploration without classes. by Sil van Diepen (@silvandiepen) on CodePen.light

Author

  • Sil van Diepen

Made with

  • HTML (Pug) / CSS (SCSS)

INTERACTIVE ELEMENTS

CSS animations for interactive elements.

See the Pen Animations for interactive elements #2 by Stas Melnikov (@melnik909) on CodePen.light

Author

  • Stas Melnikov

Made with

  • HTML / CSS

HTML AND CSS LINK EFFECT

The “Read more” link effect in HTML and CSS.

See the Pen The "Read more" link by Stas Melnikov (@melnik909) on CodePen.light

Author

  • Stas Melnikov

Made with

  • HTML / CSS

FLAG # LINKS!

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

See the Pen Flag # links! by Natalya (@tallys) on CodePen.light

Author

  • Natalya

Made with

  • HTML / CSS (SCSS)

LINK EFFECT

HTML and CSS link squiggle effect.

See the Pen Link Effectz – Squiggle by Geoff Graham (@geoffgraham) on CodePen.light

Author

  • Geoff Graham

Made with

  • HTML / CSS

LINK WITH GRADIENT BACKGROUND

Link with gradient background on hover.

See the Pen #0001 • Link with gradient background on hover by Giulia Malaroda (@giuliamalaroda) on CodePen.light

Author

  • Giulia Malaroda

Made with

  • HTML / CSS

ANIMATED FONT WEIGHT ON HOVER

Thin link turns bold.

See the Pen Animated font weight on hover by Jesper Strange Klitgaard Christiansen (@jesperkc) on CodePen.light

Author

  • Jesper Strange Klitgaard Christiansen

Made with

  • HTML
  • CSS/SCSS

MULTI-LINE LINK

Multi-line link hover effect.

See the Pen Multi-line Link Hover Effect by Antoinette Janus (@internette) on CodePen.light

Author

  • Antoinette Janus

Made with

  • HTML
  • CSS/SCSS

LINK ARROW

Link hover arrow idea.

See the Pen Link Hover Arrow Idea by Gabrielle Wee 🧧 (@gabriellewee) on CodePen.light

Author

  • Gabrielle Wee

Made with

  • HTML
  • CSS/SCSS

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.

See the Pen Gradient Underline Animation by Colin Horn (@colinhorn) on CodePen.light

Author

  • Colin Horn

Made with

  • HTML
  • CSS/SCSS

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.

See the Pen Cool hover effect with mix-blend-mode by Tiago Alexandre Lopes (@TiagoLopes) on CodePen.light

Author

  • Tiago Alexandre Lopes

Made with

  • HTML
  • CSS

Underline Hover

HTML and CSS underline hover effect.

See the Pen Underline hover test by Elwin van den Hazel (@elwinvdhazel) on CodePen.light

Author

  • Elwin van den Hazel

Made with

  • Html / CSS
Demo and Download

Animate Underline Wavy

That cool wiggly underline that people like.

See the Pen Animate underline wavy by David Darnes (@daviddarnes) on CodePen.light

Author

  • David Darnes

Made with

  • Html / CSS
Demo and Download

Fancy Text-Shadow Link Underline

HTML and CSS fancy text-shadow link underline.

See the Pen Fancy text-shadow link underline by Ryan (@jryantaylor) on CodePen.light

Author

  • Ryan

Made with

  • Html / CSS
Demo and Download

Follow Along Links

Hover on the links and it follows the cursor, highlighting the links as you go!

See the Pen #JavaScript30 Day 22: Follow Along Links by Katherine Kato (@kathykato) on CodePen.light

Author

  • Katherine Kato

Made with

  • Html / CSS
Demo and Download

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.

See the Pen Pure CSS Single Element Link Styles by Matthew Shields (@MatthewShields) on CodePen.light

Author

  • Matthew Shields

Made with

  • Html / CSS
Demo and Download

Strikethrough Hover Effect

Hover effect for links. Use only one pseudo-element on link.

See the Pen Strikethrough hover-effect by Artyom (@artyom-ivanov) on CodePen.light

Author

  • Artyom

Made with

  • Html / CSS
Demo and Download

Jumping Link Hovers

Jumping link hovers with HTML and CSS.

See the Pen Jumping link hovers by Bennett Feely (@bennettfeely) on CodePen.light

Author

  • Bennett Feely

Made with

  • Html / CSS
Demo and Download

Arrowed Link

Arrowed link – circle on hover (cf Google home website).

See the Pen Arrowed link – circle on hover (cf Google Home website) by Alex Jolly (@SachaJolly) on CodePen.light

Author

  • Alexandre Jolly

Made with

  • Html / CSS
Demo and Download

LINK ANIMATION

Link animation on hover.

See the Pen Heading link animation by Sonja Strieder (@sonjastrieder) on CodePen.light

Author

  • Sonja Strieder

Made with

  • HTML
  • CSS/SCSS

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

See the Pen Links with Marginalia Notes, version 2 by Amelia Bellamy-Royds (@AmeliaBR) on CodePen.light

Author

  • Amelia Bellamy-Royds

Made with

  • HTML
  • CSS

Anchor Hover Effects

Testing out some hover effects for anchor tags in body typography using CSS pseudo elements.

See the Pen Anchor Hover Effects by Simon Gooder (@simgooder) on CodePen.light

Author

  • Simon Gooder

Made with

  • CSS
Demo and Download

LINK HIGHLIGHT HOVER/CLICK EFFECT

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

See the Pen Link Highlight Hover/Click Effect by Emily Hayman (@eehayman) on CodePen.light

Author

  • Emily Hayman

Made with

  • HTML
  • CSS/SCSS

TEXT UNDERLINE HOVER EFFECTS

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

See the Pen Text underline hover effects by Misha Heesakkers (@MishaHahaha) on CodePen.light

Author

  • Misha Heesakkers

Made with

  • HTML / CSS (PostCSS)

ARROW LINK

Arrow link :hover effect.

See the Pen Arrow link :hover effect by Nicolas Udy (@udyux) on CodePen.light

Author

  • Nicolas Udy

Made with

  • HTML
  • CSS/PostCSS

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.

See the Pen Anchor Click Canvas Animation by Nick Sheffield (@nicksheffield) on CodePen.light

Author

  • Nick Sheffield

Made with

  • CSS
Demo and Download

LINK IDEAS (PROOF OF CONCEPT)

Cool CSS3 link ideas.

See the Pen Cool CSS3 Link Ideas by Brenden Palmer (@brenden) on CodePen.light

Author

  • Brenden Palmer

Made with

  • HTML
  • CSS

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.

See the Pen Subtle link animations. by Josip Psihistal (@butsuri) on CodePen.light

Author

  • Josip Psihistal

Made with

  • Html / CSS
Demo and Download

Link Hover Effects

8 CSS link hover effects.

See the Pen Link Hover Effects by Peiwen Lu (@P233) on CodePen.light

Author

  • Peiwen Lu

Made with

  • CSS
Demo and Download

Categorized in: