29 HTML and CSS Link Examples
Collection of hand-picked free HTML and CSS link code examples. Update of May 2018 collection. 7 new items.
Related Articles
About the code
Link Styling
Link styling exploration without classes.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
About the code
Interactive Elements
CSS animations for interactive elements.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: r-button.css, r-link.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: -
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: -
About the code
Link Effect
HTML and CSS link squiggle effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Link with Gradient Background
Link with gradient background on hover.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
About the code
Animated Font Weight On Hover
Thin link turns bold.
About the code
Multi-line Link
Multi-line link hover effect.
About the code
Link Arrow
Link hover arrow idea.
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.
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.
Underline Hover
HTML and CSS underline hover effect.
Made by Elwin van den Hazel
July 12, 2017
Animate Underline Wavy
That cool wiggly underline that people like.
Made by David Darnes
July 10, 2017
Fancy Text-Shadow Link Underline
HTML and CSS fancy text-shadow link underline.
Made by Ryan
July 1, 2017
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
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
Strikethrough Hover Effect
Hover effect for links. Use only one pseudo-element on link.
Made by Artyom
June 23, 2017
Jumping Link Hovers
Jumping link hovers with HTML and CSS.
Made by Bennett Feely
June 19, 2017
Arrowed Link
Arrowed link - circle on hover (cf Google home website).
Made by Alexandre Jolly
May 21, 2017
About the code
Link Animation
Link animation on hover.
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
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
About the code
Link Highlight Hover/Click Effect
CSS background transition to add a highlight effect on hover/click of a link.
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: -
About the code
Arrow Link
Arrow link :hover effect.
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
About the code
Link Ideas (Proof Of Concept)
Cool CSS3 link ideas.
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
Link Hover Effects
8 CSS link hover effects.
Made by Peiwen Lu
April 4, 2014
