Change "SHOP NOW" button text when hovering over it

Solved

Change "SHOP NOW" button text when hovering over it

Mohd01
Excursionist
51 0 4

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!

 

 

Accepted Solution (1)
EstherBui
Excursionist
275 39 42

This is an accepted solution.

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

 

Best,

Esther

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

View solution in original post

Replies 8 (8)

EstherBui
Excursionist
275 39 42

Hi, 
Do you want like that? 

EstherBui_0-1737302138865.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Mohd01
Excursionist
51 0 4

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.

EstherBui
Excursionist
275 39 42

This is an accepted solution.

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

 

Best,

Esther

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Mohd01
Excursionist
51 0 4

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.

EstherBui
Excursionist
275 39 42

ok, give me some example 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Mohd01
Excursionist
51 0 4

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

EstherBui
Excursionist
275 39 42

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Mohd01
Excursionist
51 0 4

Oh its alright, thanks anyways!