Button underline ease in on hover - Dawn

[Element1]

hello, is anyone able to help me add an underline ease in on hover to my "shop now" button text on my image banner?

https://51dmzlcv2fxmqh9a-27884224571.shopifypreview.com

[Rahul_dhiman]

Hello @Element1 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

a.button.button--primary {
text-decoration: underline 2px;
}

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

[Element1]

unfortunately, this didn't work for me

[Rahul_dhiman]

Go to online store ---------> themes --------------> actions ------> edit code------->base.css
at the end of the file and save.

.banner__buttons a:hover {
font-weight: bold !important;
text-decoration: underline 2px;
}

[steve_michael2]

Hi @Element1 

Go to online store > themes > click 3 dots > edit code > search base.css then paste this code in the base.css on the bottom of the file

a.button.button--primary:hover {
    text-decoration: underline;
}

[goldi07 · Accepted solution]

hello @Element1 

Go to online store ----> themes ----> actions ----> edit code ---->assets ----section-image-banner.css...> add the code end of the file

 .banner__buttons {
    text-decoration: none;
    position: relative;
    color: #000;
    font-weight: bold;
    padding-bottom: 2px;
}
 
 .banner__buttons::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width 0.3s ease-in;
}
 
.banner__buttons:hover:after {
    width: 100%;
}

thanks

[Element1]

this worked! thank you so much

[goldi07]

I am glad that worked 😊