CSS: Background fills on hover from bottom to top: - html

Question

please take a look at this example:
https://www.outsideonline.com/2317131/wilma-rudolph-worlds-fastest-woman
Note that when you hover over link, the background animated to fill the anchor text from bottom to top, and clears is from top to bottom when you hover away from it.
I've done something similar with my own website. The relevant CSS for it:
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
-webkit-transition: box-shadow .15s ease-in-out;
transition: box-shadow .15s ease-in-out;
color: black;
}
a:hover {
box-shadow: inset 0 -3px 0 40px #FFF986;
-webkit-transition: box-shadow .15s ease-in-out;
transition: box-shadow .15s ease-in-out;
}
This gives me a similar effect, but instead of filling from top to bottom like in the example link: The background starts to fill from all sides of the rectangle toward to center.
How do I force it to fill from top to bottom, like in the example link I shared? what am I missing?

Answer 1

You're changing wrong parameter:
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
transition: box-shadow .15s ease-in-out;
color: black;
line-height: 40px;
}
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
}
Hey Mickey!

Answer 2

Another solution that uses a 50%/50% linear gradient resized to 200%. To animate the background change the background position:
a {
background-image: linear-gradient(to top, yellow 50%, transparent 50%);
background-size: 100% 200%;
background-position: top;
transition: background-position 0.5s ease-in-out; /** I've changed the time for demo purposes **/
color: black;
}
a:hover {
background-position: bottom;
}
I'm a link
I'm another link

Answer 3

a {
box-shadow: inset 0 -3px 0 -1px #FFF986;
transition: box-shadow .15s ease-in-out;
color: black;
line-height: 40px;
}
a:hover {
box-shadow: inset 0 -40px 0 -1px #FFF986;
}
Hey Mickey!