Primary buttons hover shows black text on home page (Tinker theme)

[Monness]

Hi,

I’m experiencing an issue with the primary buttons on my home page (Tinker theme). The buttons are all set as primary, and the colours in the theme editor are configured correctly - specifically, the hover state is supposed to display a black background with white text.

However, when I hover over these buttons on the home page, the background becomes black as expected, but the text also turns black. The expected behaviour - black background with white text does not happen.

Interestingly, this issue does not occur with other buttons like Add to Cart, Quick Add, or quantity selectors, their hover states display correctly with a black background and white text.

Has anyone else experienced this in the Tinker theme? Any guidance on forcing the hover text to white while keeping the black background for these buttons would be greatly appreciated.

Thank you!

[devcoders]

Hi @Monness

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[Monness]

Luxury Fragrances Inspired By World Famous Brands

[tim_tairli]

Does this code look familiar? It’s towards the end of your layouts/theme.liquid, but probably added by an app.

It makes your <a> elements to always have black font, and because it’s !important, theme code can’t override it on hover.
And because it applies to links, it does not work for all buttons – hence the Add To Cart button is not affected.

You should probably remove the rule, but at least make it:

:is(a, a:visited, a:active, .header a, .footer a, .product a, .related-products a):not(.button) {
  color: #000000 !important;
}