How can I achieve this hover effect on links?

[toolman]

Hi there,

I am looking to apply a similar effect to the links on this page:

https://www.freshtilledsoil.com/what-the-style-ui-pattern-board/?ref=webdesignernews.com

(scroll to the bottom for example link “Need help with your digital product or website? Get in touch.”)

How would I create the light green thick underline with the animation?

Any ideas would be great!

[ralphm]

You can peek at the CSS to see what they’re doing there. The :hover style on the link’s span is

a.hover:hover span {
    box-shadow: inset 0 -0.3em 0 0 rgba(108,216,206,0.7);
}

And there’s a simple transition to get the slide in effect:

    transition: box-shadow .2s;

[toolman]

Cool, thanks