Change "SHOP NOW" button text when hovering over it

Shopify Discussion
1

Hi all,

I want the “SHOP NOW” button text to change when someone hovers over it.
This is how I want it to look when no one is hovering over it.

Osama01_2-1737298830565.png

This is how I want it to look when someone hovers over it. (but with rounded edges)

Osama01_1-1737298811163.png

Theme: Dawn theme
Store URL: https://cngdxq-tk.myshopify.com/
Thanks in advance!

2

Hi,
Do you want like that?

EstherBui_0-1737302138865.png
EstherBui_0-1737302138865.png453×183 10.1 KB

3

I want the background to be transparent when someone hovers over it so the background becomes whatever the image behind it is. Sorry If I wasn’t clear in my question.

4

Hi Osama01

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
a.button.button--secondary:hover {
    color: #fff;
}

.banner__buttons:hover {
    background: transparent;
}

Result:

EstherBui_0-1737303018041.png
EstherBui_0-1737303018041.png284×106 16.7 KB

Best,

Esther

5

Hey!
It worked, but is it possible to make an animation? Like when someone hovers over it the original button slides until it becomes fully transparent. If you don’t understand maybe I can try and find a website with a similar idea.

6

ok, give me some example

7

https://comfypuppy.co/
Check the SHOP NOW button on that website.

8

oh, sorry, it code with JS so i can’t make like that

9

Oh its alright, thanks anyways!