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 Untitled by Andreas Wik (@andreaswik) on CodePen.
In order to achieve this we will make use of a few background properties. So, starting with a simple anchor tag:
<a href="#">Letraset</a>
Let’s add some CSS. In order to get access to properties like background-size and background-position we will add a gradient as background using background-image. In this case we just want a singe color as background, so we’ll simply set the gradient to use two identical colors.
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
}
Left to right
First we’ll get the left-to-right filling effect working. By default, when the element is not hovered, we don’t want the background to show up at all, so we’ll set the background-size to 0 width and 100% height. The background-position is top left by default, so there’s no need to specify that for now. We will change this for the other effects (right to left, top to bottom, bottom to top).
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
/* Set background size to 0 width and full height */
background-size: 0 100%;
}
To get the animation part working, we’ll add set transition to however long we want it to last. I’ll set it to half a second for now.
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
background-size: 0 100%;
/* Add transition */
transition: .5s;
}
Last thing to get this working is to change the background-size when the user hovers over the element, like so:
a:hover {
background-size: 100% 100%;
}
That’s it, so the final CSS looks like this:
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
background-size: 0 100%;
transition: .5s;
}
a:hover {
background-size: 100% 100%;
}
Right to left
To make the background show from right to left instead, we only need to change one thing in our CSS. Change the background-position to right.
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
background-size: 0 100%;
transition: .5s;
/* Set background position to right */
background-position: right;
}
Top to bottom
Make the background show from top to bottom by simply changing the background-size property – width to 100% and height to 0.
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
/* Change background size to full width and 0 height */
background-size: 100% 0;
transition: .5s;
}
Bottom to top
Make the background show from bottom to top by simply changing the background-size property – width to 100% and height to 0. We should also change the background-position to bottom.
a {
background-image: linear-gradient(#cbcff4, #cbcff4);
background-repeat: no-repeat;
background-size: 100% 0;
/* Change background position to bottom */
background-position: bottom;
transition: .5s;
}
Hope it helps!
Share this article
