-
Hi,
I’m trying to set up a button which show inverted color on hover. When not in hover it should be red text, white background, while in hover should be white text, red background. For some reason it is not working on the front-end, only in back-end. In the front-end the text is showing red, disappearing in the red background.
I have no custom css.Here some screenshot (the site is in staging, I can add credentials if you need them).
-
Hi there,
Could you please share the URL of the page so we can take a closer look?
From your description, it looks like the theme’s link colors are overriding the button styles.
You can fix this in Customizer → Colors → Content → Links. Remove those settings and instead apply your link colors under Customizer → Colors → Body.
In GenerateBlocks:
- Select the Button → set Main: text = red, background = white.
- Switch to Hover → text = white, background = red.
This will ensure the button displays the inverted hover colours on the front-end as well.
-
You can fix this in Customizer → Colors → Content → Links. Remove those settings and instead apply your link colors under Customizer → Colors → Body.
you where right, thanks.
BTW, is this behavior intended? Shouldn’t a element-related style override a general theme style? -
Hi there,
Shouldn’t a element-related style override a general theme style?
It’s more of a CSS specificity issue, since any styling set in the Customizer takes precedence.
You can check David’s explanation here on how you can handle such issue in the future:
https://generate.support/topic/button-text-colour-changed/#post-175377
- You must be logged in to reply to this topic.