Change Color Of Specific Buttons - Dawn Theme

Store Design

AI-generated summary

Main issue: Change a specific Dawn theme button to black with white text while keeping the hover effect.

What worked for the original poster:

  • Add CSS in the theme’s stylesheet (assets/base.css; some versions use theme.css) targeting the exact section and button classes:
    • #shopify-section-template–14167940464867__1632784713f127b553 .button.button–primary { background-color: #000; color: #fff; }
    • Use !important to override theme defaults when needed.
  • To remove the white border around the button, add: box-shadow: none !important under the same selector.
  • Hover effect was preserved by the OP after adjusting their CSS.

Context/terms:

  • Dawn is Shopify’s default theme. Section-specific IDs (long numbers in the selector) target only that section. .button.button–primary refers to primary buttons.

Current status:

  • OP’s issue resolved.
  • Ongoing concerns from others: similar CSS not working for their stores; desire for a no-code way to change button colors; confusion over where to add CSS (base.css vs theme.css) and missing files; default “Image Banner” buttons not responding to custom CSS; theme color settings (e.g., Accent 2) affecting results.

Open items:

  • A general, non-code solution and consistent file guidance for different Dawn versions remain unresolved.
1

Hi!

Can someone help me change the color of this button to black and the text white?

I currently have a code that allows for a hover effect on buttons (second image), on links in the header and footer, you can see the code below.

I’d like to keep the hover effect intact, please.

Anniebsmith_0-1632947638153.png
Anniebsmith_0-1632947638153.png2026×676 98.9 KB

Anniebsmith_1-1632947703689.png
Anniebsmith_1-1632947703689.png2048×742 118 KB

.header__menu-item.header__menu-item.list-menu__item.link.link--text.focus-inset
.site-nav__link:focus .site-nav__label,
.site-nav__link:not([disabled]):hover .site-nav__label,
.site-nav__link--button:focus,
.site-nav__link--button:hover,
.site-footer__rte a:hover,
.site-footer__linklist-item a:hover,
.site-footer__copyright-content a:hover {
  
    color: #EBF38B !important;
    border-bottom: 1px solid #FFFFFF !important;
}

a:not([disabled]):hover,
a:focus {
    color: #EBF38B;
}

My site is https://cosmicmaps.myshopify.com/?key=5cb10b855d402cb97737274ed778ad219abcfa226ba46504afa840151e0b458a the PW is Cosmic1234.

Thanks!

2

@Anniebsmith

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

#shopify-section-template--14167940464867__1632784713f127b553 .button button--primary{
     background-color: #000;
    color: #fff;
}

Hope this works.

3

No luck with that one. The button is still white.

Anniebsmith_0-1632985375574.png
Anniebsmith_0-1632985375574.png770×208 3.94 KB

4

@Anniebsmith

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

#shopify-section-template--14167940464867__1632784713f127b553 .button button--primary{
     background-color: #000 !important;
    color: #fff !important;
}
5

That didn’t work either. I added it to the top and bottom of the bass.css file.

6

hello @Anniebsmith

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

#shopify-section-template--14167940464867__1632784713f127b553 .button.button--primary{
     background-color: #000000 !important;
    color: #ffffff !important;
}
7

@Anniebsmith

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

#shopify-section-template--14167940464867__1632784713f127b553 .button.button--primary{
     background-color: #000000 !important;
    color: #ffffff !important;
}

Thanks!

8

Thanks! This worked to change the color to black and white, and I was able to adjust the code to get the hover effect, but now it has a white border around the button. I can’t seem to get rid of it or change it to black. Any help with that?

Anniebsmith_0-1633220692411.png
Anniebsmith_0-1633220692411.png628×200 4 KB

9

hello @Anniebsmith

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-template--14167940464867__1632784713f127b553 .button.button--primary{
    box-shadow:none !important ;
}
10

Perfect! Thanks!!!

11

Hi there.

I’ve tried the above code and for some reason it isn’t working. I’m after the button colour to be #d71f2c and the text to be white, I’m not sure why but my buttons are still staying the original theme colour.

I’ve managed to update the solid button label to be the red I’m after but it has not changed any of the button colours. It only shows in that colour once I click Accent 2, which has a white background - even then the colour is muted and of course the rest of the text is that red as well. I have Secondary colours text set to black.

Any help would be greatly appreciated! Thank you.

12

How do we make button colour changes with dawn without code skills ?

13

@Kinjaldavra I added this code to erase the border of the button in theme-editor.jss but it doesnt seem to work. I also have Dawn but I don’t see theme.css

14

I was wondering the same thing. You would think there would be an option to do this without coding.

15

I’m having same issues with absolutely no control over buttons on Dawn landing page, “Image Banner” section. Your solutions have had no effect on the buttons. These buttons are defaults. I did not place them in the theme. Why are such basic design tasks so difficult, and solutions so arcane and obscure?