How can I change all button hover colors in the Dawn theme?

Shopify Discussion

Topic summary

Goal: unify button hover styling across the Shopify Dawn theme (banner, “view all,” image-with-text, shop/buy now) so text stays white (#ffffff) and backgrounds use black/brown.

Context: Store URL provided (pawshubs.com). CSS hover state (styles applied when the cursor is over a button) will be edited in the theme’s CSS file (base.css/theme.css).

Actions taken:

  • CSS rules shared to update hover styles for banner buttons, add-to-cart (Globo app selectors), swatches, and a specific button ID, primarily using background #C4A484 with white text.
  • Sign-in button on the Account Login page initially unchanged; additional CSS targeting “#customer_login > button” set default background black (#000000) and hover to brown (#C4A484). Screenshots confirm success.

Latest preference: apply black (#000000) and brown (#c4a484) scheme to the two Account section buttons, with text remaining white.

Outcome: Most buttons now follow the new hover styling; the Account page requires ensuring both buttons consistently use the black/brown colors.

Status: Partially resolved. Next step is adding/adjusting CSS selectors for any remaining Account buttons to match the specified colors and ensure consistency across the theme.

Summarized with AI on January 17. AI used: gpt-5.
1

I use the Dawn theme and would like help me 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. Currently i use in text color #ffff and in button backround #c4a484 so i want in the text hover color to be the same #ffff but in the button backround hover color to be with black color

1 Like
2

Hi,
Kindly share your store url so that i can check

3

Hi @VisarK

Would you mind to share your Store URL website? with password if its protected. Thanks!

4

www.pawshubs.com

5

Yes www.pawshubs.com

1 Like
6

Try this one for hover.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.globo-swatch-product-item .swatches-globo--list .btn.btn-globo.globo--add-to-cart:hover {
    border: 1px solid #C4A484;
    padding: 12px 16px;
    background: #C4A484;
    color: #fff!important;
    transition: box-shadow .3s;
    border-radius: 6px;
}
.banner__buttons>.button:hover {
    background: #C4A484!important;
    color: #fff!important;
    box-shadow: none!important;
}
.btn-globo.globo--add-to-cart.globo-ajax-form-cart:hover{
    background: #C4A484!important;
    color: white!important;
    border: 1px solid #C4A484!important;
}

#e-1695342827979 .gf_button:hover {
    border-radius: 2px 2px 2px 24px!important;
    color: #fff!important;
    background-color: #c4a484!important;
    border-radius: 2px!important;
}
  • And Save.
1 Like
7

Thanks a lot Made4uo-Ribe all buttons are good just one button doesnt have the hover.In the Account Login the button Sign in still doesnt change

8

Try this one.

Same Instruction.

#customer_login > button {
    background: #000000 !important;
}

#customer_login > button:hover {
    background: #C4A484 !important;
}

And Save.

Result:

Made4uoRibe_0-1695670814754.png
Made4uoRibe_0-1695670814754.png599Ă—364 6.62 KB

Made4uoRibe_1-1695670822899.png
Made4uoRibe_1-1695670822899.png712Ă—481 8.62 KB

You can change the color you like.

1 Like
9

Thank you so much so i have only two buttons on this section of account to do like so

Screenshot_20230925_230813_Chrome.jpg
Screenshot_20230925_230813_Chrome.jpg1080Ă—1354 49 KB

Screenshot_20230925_230902_Chrome.jpg
Screenshot_20230925_230902_Chrome.jpg1080Ă—658 27.2 KB

10

Do you like to black and brown color also?

11

Yes to be #000000 and #c4a484