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

[tahliamotteram]

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

[SomeUsernameHe]

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.

[OneCommerce]

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.

[GemPages]

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

[dmwwebartisan]

@tahliamotteram 

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

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

Hope this works!