Button underline ease in on hover - Dawn

Store Design
, ,

Topic summary

A user seeks help adding an underline hover effect to a \

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

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

2

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;
}

7.png
7.png236×144 39.8 KB

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

3

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;
}
4

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

1 Like
5

unfortunately, this didn’t work for me

6

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;
}
7

this worked! thank you so much

1 Like
8

I am glad that worked :blush: