Button underline transition on hover

[emilyaugstudios]

Hi everyone, I have a stylistic css question when it comes to buttons. All of my store buttons are underlined (link rather than primary box button style), I was wondering if there is a way to transition only the underline colour to red #c90013 on hover only? So when a customer hovers the mouse over the button the colour of the underline changes?

URL (Symmetry theme) – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1

Any help or advice on this would be greatly appreciated 🙂 

[Sangeetanahar]

Hello @emilyaugstudios 

Go to online store ----> themes ----> actions ----> edit code ---->assets....>main.css
Serach the code

.small-feature-link:hover {
    text-decoration-color: rgb(var(--link-color));
}

replace with this code

.small-feature-link:hover {
    text-decoration-color: #c90013;
}

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[Rahul_dhiman]

HEllo @emilyaugstudios 

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> main.css
search this code.

.section-footer a:hover {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-color: rgb(var(--link-color));
text-decoration-thickness: 1px;
}

and replace with this code.

.section-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: #c90013 !important;
    text-decoration-thickness: 1px;
}

 result

If this was helpful, hit the like button and accept the solution.
Thanks