Collection of hand-picked free HTML and CSS link effect code examples from Codepen, GitHub, and other resources with :hover and :active state. Update of May 2021 collection. Twelve new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Custom Animated Links with Psuedo Elements
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effect #4
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effect #5
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effect #6
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effect #7
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effect #1
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Hover Effect #2
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Mouse-Out Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Link Split Hover Effect
The text is duplicated, masked with clip-path then psuedoelements and movements are animated with CSS transitions. The underscore is made with a linear gradient background image, but if you don't plan to use a link like this over multiple lines of text, you could just use another pseudoelement.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Exploring Creative Link Hover Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Fade out Other Links on Hover
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Laser Revealed Title Link
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Neat Hover Effects
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
CSS Link Hover Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Animated SVG Links
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Link Hover Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Variable Powered Underline Transition
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About a code
Underline Animation - Link
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Link Hover Interaction
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Link Hover Flash
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Underline Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Half-transparent CurrentColor Link Underline
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About a code
Spring/Bounce Hover Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
About the code
Link Styling
Link styling exploration without classes.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About the code
Link Effect
HTML and CSS link squiggle effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
Made with
- HTML
- CSS/SCSS
About the code
Animated Font Weight On Hover
Thin link turns bold.
Links
Made with
- HTML
- CSS/SCSS
About the code
Multi-line Link
Multi-line link hover effect.
Links
Made with
- HTML
- CSS/SCSS
About the code
Link Arrow
Link hover arrow idea.
Links
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.
Links
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.
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
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS3 Keyframes Animation Link Style
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML
- CSS/SCSS
About the code
Link Animation
Link animation on hover.
Links
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
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
Links
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.
Links
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: -
Links
Made with
- HTML
- CSS/PostCSS
About the code
Arrow Link
Arrow link :hover effect.
Links
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: -
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
Links
Made with
- HTML
- CSS
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