How can I change the hover button color in the Dawn theme?

How can I change the hover button color in the Dawn theme?

tahliamotteram
Excursionist
50 0 4

Hello - I'm wondering if there is code to use to change the hover background colour and text for all of my buttons on my website? I'm using the dawn theme. It currently doesn't have a hover effect.

 

https://v7weddlb5nzkxxvw-7787118645.shopifypreview.com

 

 

Replies 4 (4)

SomeUsernameHe
Shopify Partner
495 54 99

Of course! You can use the following code for that:

 

a.button.button--primary:hover {
    background-color: #000;
}
a.button.button--secondary:hover {
    background-color: #000;
}

 

You would just need to change the #000 to your color of choice.

 

Have I helped? Consider putting coffee in my mouth!
Buy Me a Coffee

OneCommerce
Shopify Partner
253 19 109

Hello @tahliamotteram ,

We are OneCommerce - an eCommerce Solution platform.

 

You can copy these code to change the hover background colour:

button:hover {
   background-color: [new color];
   color: [new text color];
}

Replace [new color] with the background color and [new text color] with the new text color that you want.

 

Hope this is work for you. Please let us know if you need any further supports.

If you think our reply is helpful, please hit the Like Button or mark it as Accepted Solution, it means a lot to us.

 

Best regards,

OneCommerce team.

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us

GemPages
Shopify Partner
5624 1261 1230

Hello @tahliamotteram 

It's GemPages support team and glad to support you today.

 

You can follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below: 

 

.button:hover{
  background: #000;
  color: #fff;
}

 

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

dmwwebartisan
Shopify Partner
12321 2551 3715

@tahliamotteram 

Please add the following code at the bottom of base.css file. 

.button:hover{
background: #000;
color: #fff;
}

 

Hope this works! 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app