Gradually Fill Link Background Color With CSS
July 8, 2019 by Andreas Wik
A hover animation effect for links that I really like is when it’s gradually filled with a background color. Kinda like a magic marker!
Like this:
See the Pen Fill link background with color gradually with CSS by Andreas Wik (@andreaswik) on CodePen.
The way it’s done is to manipulate the :before pseudo element for the anchor.
Set its content to nothing, set a background color, and set the position to absolute. Position it in the top left and set the width to 0px. On :hover we change the width to 100%. To get it animated, simply add a transition.
Don’t forget to set the z-index to -1 to create a new stacking order, otherwise the :before pseudo element will be stacked on top, and the text will be hidden.
So, here is the final CSS:
a {
position: relative;
text-decoration: none;
color: green;
}
a:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 100%;
background: orange;
transition: all .5s;
z-index: -1;
}
a:hover:before {
width: 100%;
}
Hope it helps!
Recommended reading
Share this article
