Dawn Theme: Help changing all button colors on hover

Store Design
1

Hello,

I just installed the Dawn theme and would like help to change all of the button colors on the hover. (Image banner buttons, view all buttons, Image with Text button, shop now, buy now buttons.)

I would like all buttons to be the same: A solid beige with brown text and on the hover it changes to solid brown with beige text and a beige border. I have the button colors already set the way I want, it’s just I can’t figure how the hover color change part.

original button color #faf2ec,
the text #A75c34,
border #faf2ec (same is the button)

on the hover I would like the button to be the inverse, #A75c34,
text #faf2ec
border around button #faf2ec

Any assistance on this would be so appreciated. My store isn’t open yet so if you could just please provide a simple code that works for the Dawn theme in general without requiring my URL.

Thanks

2

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

Hi any update on this, I sent you my url and password, please check your messages. Thanks.

4

Thank you so much! So helpful

5

Hello,

I am looking for the same modification. Can you please share the solution with us ?

Thanks,

2 Likes
6

Hello Amal jebbali,

My name is Damimond, I’m a Shopify partner.

I am so much interested in assisting you on your request.kindly share your Shopify store URL and screenshots.

Best regards

1 Like
7

Hello Dami,

Sorry, I didn’t yet publish my store with the Dawn Theme, as I am still working on it.

Here is my problem:

By default, in the Dawn theme, when you hover a button, it only adds a thicker border around the button. But I want to change the color of the button when hovering it.

I couldn’t find where to change this in the code of the theme.

Here is a screenshot of the default button when hovering:

Capture d’écran 2021-09-19 à 13.00.45.png
Capture d’écran 2021-09-19 à 13.00.45.png1422×258 8.09 KB

Thanks for your help,

1 Like
8

Thank you for your reply as I will guide you on this:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/custom.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
#shopify-section-16256789336548bd6a .Button.Button--primary:hover {
    background: #fff;
}
1 Like
9

If there are problems,let me know by sending a message through this link:

https://bit.ly/3kn0oJx

Best regards.