Rengga Dev – Creating CSS link hover effects can add a bit of flair to an otherwise bland webpage. If you’ve ever found yourself stumped trying to make a slick hover effect, then I have six CSS effects for you to take and use for your next project.
Let’s get right to it!
1.The Sliding Highlight Link Hover Effect
<a href="#">Hover this link</a>
a {
box-shadow: inset 0 0 0 0 #54b3d6;
color: #54b3d6;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #54b3d6;;
}
/* Presentational styles */
a {
color: #54b3d6;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
height: 100vh;
place-items: center;
}
2.The Text Swappin’ Link Hover Effect
<p>Hover <a href="#" id="style-2" data-replace="this link"><span>this link</span></a></p>
a {
overflow: hidden;
position: relative;
display: inline-block;
}
a::before,
a::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
a::before {
background-color: #54b3d6;
height: 2px;
bottom: 0;
transform-origin: 100% 50%;
transform: scaleX(0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a::after {
content: attr(data-replace);
height: 100%;
top: 0;
transform-origin: 100% 50%;
transform: translate3d(200%, 0, 0);
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
color: #54b3d6;
}
a:hover::before {
transform-origin: 0% 50%;
transform: scaleX(1);
}
a:hover::after {
transform: translate3d(0, 0, 0);
}
a span {
display: inline-block;
transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}
a:hover span {
transform: translate3d(-200%, 0, 0);
}
/* Presentational Styles */
body {
display: grid;
font-family: 'Poppins', sans-serif;
font-size: 27px;
line-height: 1.5;
height: 100vh;
place-items: center;
}
a {
text-decoration: none;
color: #18272F;
font-weight: 700;
vertical-align: top;
}
3.The Growing Background Link Hover Effect
<p>Hover this <a href="#">cool</a> link.</p>
a {
text-decoration: none;
color: #18272F;
font-weight: 700;
position: relative;
}
a::before {
content: '';
background-color: hsla(196, 61%, 58%, .75);
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 8px;
z-index: -1;
transition: all .3s ease-in-out;
}
a:hover::before {
bottom: 0;
height: 100%;
}
/* Presentational Styles */
body {
display: grid;
font-family: 'Poppins', sans-serif;
font-size: 27px;
line-height: 1.5;
height: 100vh;
place-items: center;
}
4.The Right-to-Left Color Swap Link Hover Effect
<a href="">Hover This Link</a>
a {
background-image: linear-gradient(
to right,
#54b3d6,
#54b3d6 50%,
#000 50%
);
background-size: 200% 100%;
background-position: -100%;
display: inline-block;
padding: 5px 0;
position: relative;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease-in-out;
}
a:before{
content: '';
background: #54b3d6;
display: block;
position: absolute;
bottom: -3px;
left: 0;
width: 0;
height: 3px;
transition: all 0.3s ease-in-out;
}
a:hover {
background-position: 0;
}
a:hover::before{
width: 100%;
}
/* Presentational Styles */
body {
display: grid;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
height: 100vh;
place-items: center;
}
5.The Rainbow Underline Link Hover Effect
<a href="#">Hover this link</a>
a {
color: inherit;
text-decoration: none;
}
a {
background:
linear-gradient(
to right,
rgba(100, 200, 200, 1),
rgba(100, 200, 200, 1)
),
linear-gradient(
to right,
rgba(255, 0, 0, 1),
rgba(255, 0, 180, 1),
rgba(0, 100, 200, 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;
}
/* Presentational Styles */
body {
display: grid;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
height: 100vh;
place-items: center;
}
6.The Passing Underline Link Hover Effect
<a href="#">Hover this link</a>
a {
color: #18272F;
position: relative;
text-decoration: none;
}
a::before {
content: '';
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: #18272F;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0);
transition: transform .3s ease-in-out;
}
a:hover::before {
transform-origin: left;
transform: scaleX(1);
}
/* Presentational Styles */
body {
display: grid;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
height: 100vh;
place-items: center;
}
7.Multiline & Underline Link Hover Effect
That’s not the only way to accomplish this! Here’s another one by Justin Wong using background instead:
<p><a href="#">Multiline<br/>effect</a></p> <p><a href="#" class="underline">Underline<br/>Version</a></p>
a {
background: linear-gradient(0deg, slateblue, slateblue) no-repeat right bottom / 0 var(--bg-h);
transition: background-size 350ms;
--bg-h: 100%;
}
a:where(:hover, :focus-visible) {
background-size: 100% var(--bg-h);
background-position-x: left;
}
.underline {
padding-bottom: 2px;
--bg-h: 2px;
}
body {
font-size: 2em;
text-align: center;
}
a {
text-decoration: none;
color: inherit;
line-height: 1;
}
Have a blast linking!
There are a lot of options when it comes to creating your own hover effect for in-line links with CSS. You can even play with these effects and create something new. I hope you liked the article. Keep experimenting!
