Amazing CSS Link Hover Effects for Your Next Project

October 18, 2022

Adding some animations makes the website much more interactive and lively rather than just plain text and images. One of the most common animations on websites is hover effects. Often, their purpose is to highlight important web page sections or elements. Creating a link hover effect in CSS can add a bit of spark to an otherwise dull looking website.

If you are a developer and interested in creating something amazing looking, check out these amazing CSS link hover effects to use in your next project.

The text link for all displays would would remain the same but the link hover effects would change for every example.

HTML Code

<a href="#">Hover here</a>

1. Sliding Highlight Effect

This effect will show a boxed highlight style to the link when hovered, changing the color of the link text in the process.

CSS Code

a {
text-decoration: none;
color: #000;
font-weight: 700;
position: relative;
}

a::before {
content: '';
background-color: #673193;
position: absolute;
left: 0;
bottom: 1px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}

a:hover::before {
bottom: 0;
height: 100%;
}

a:hover {
color:#fff
}

/* style */

body {
display: grid;
font-family: 'Calibri', sans-serif;
font-size: 27px;
line-height: 1.5;
height: 100vh;
place-items: center;
}

2. Upward Sliding Highlight Effect

An amazing hover effect to show the highlight effect. The idea is to use link’s before pseudo-element as a thick underline that sits slightly behind the actual text of the link. Then, on hover, the pseudo-element expands to cover the whole thing.

CSS Code

a {
box-shadow: inset 0 0 0 0 #673193;
color: #000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
font-body:700;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #673193;;
}

/* style */

a {
color: #000;
font-family: 'Calibri', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}

body {
display: grid;
height: 100vh;
place-items: center;
}

3. Wiggle Line Effect

A simple yet much attractive underline style for a text that wiggles when hovered.

CSS Code

:root {
--mainColor: #673193;
}

body {
align-items: center;
display: flex;
font-family: 'Calibri', sans-serif;
font-size: 27px;
height: 100vh;
justify-content: center;
font-weight: 700;
}

a {
background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 3px 3px;
color: #000;
text-decoration: none;
}

a:hover {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='purple' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
background-position: 0 100%;
background-size: auto 6px;
background-repeat: repeat-x;
text-decoration: none;
}

4. Underline Effect:

Another quiet simple effect that shows a pulse in underline of this link.

CSS Code

a {
color: inherit;
text-decoration: none;
}

a {
background:
linear-gradient(
to right,
rgba(128, 0, 128, 1),
rgba(128, 0, 128, 1)
),
linear-gradient(
to right,
rgba(128, 0, 128, 1),
rgba(128, 0, 128, 1),
rgba(300, 300, 300, 1)
);
background-size: 100% 3px, 0 3px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 400ms;
}

a:hover {
background-size: 0 3px, 100% 3px;
}

/* style */

body {
display: grid;
font-family: 'Calibri', sans-serif;
font-size: 27px;
font-weight: 700;
height: 100vh;
place-items: center;
}

These are the four simple but cool and attractive CSS link hover effects for your next project to make the website more lively and interactive.

Back to blog