Button text color blends with button color

Technical Q&A

Topic summary

A Shopify store owner reports a visibility issue where button text color matches the button background color, making text unreadable on multiple UI elements:

Affected elements:

  • Dropdown checkout button in shopping cart
  • Notification circle over cart icon
  • Size selection buttons

Problem: Button text and background colors are identical, causing text to disappear.

Attempted solutions:

  • Theme customization via UI (Online Store > Themes > Customize > Theme Settings > Colors) - changed entire top menu instead of specific buttons
  • Custom CSS code added to base.css file targeting product form elements - no effect

Current status: Issue remains unresolved. The store owner seeks a solution to change button text colors to higher contrast options while keeping button background colors unchanged. Other buttons on the site work correctly, suggesting the problem is isolated to these three specific UI components.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hi, I run www.tinyotters.com. As you can see in the screenshot below, the dropdown checkout button on the shopping cart, the little solid circle that appears over the shopping cart once you add something, and the buttons showing the selected size, ALL appear as solid buttons, not buttons with text in them. This is likely an issue that the button color and text color are the same, but as much as I’ve tried to fix this in the UI, it doesn’t change.

If possible, I’d like to change this in the UI if I can - anyone know a good solution.

I don’t know if these 3 buttons change in a different place in the UI than other buttons on my site which seem to work fine.

tinyotters_0-1668223515846.png
tinyotters_0-1668223515846.png2380×1276 262 KB

1 Like
2

You can change color of text in Online Store > Themes > Customize > Theme Settings > COLORS > Secondary colors

Screenshot 2022-11-12 at 10.35.47.png
Screenshot 2022-11-12 at 10.35.47.png650×878 62.7 KB

3

@tinyotters

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
.product-form__submit {
background: rgb(var(--color-foreground)) !important;
    color: #fff !important;
}
.product-form__input input[type=radio]:checked+label {
    color: fff !important;
}
4

Hi @KetanKumar and @Dan-From-Ryviu - sadly neither solution worked.

The code solution didn’t change anything. The UI solution changed the entire top menu. I was hoping to change the text colors to something with higher contrast, not the button color