Button block – hover style and custom button

Hiya hebhansen, I’m beginning to recognize you now 🙂

I feel your pain. There’s a trade off between ease of use and number of features. Certain features are not provided in an effort to keep things simple. For those that require more features, they should utilize other plugins, themes, or custom code that will provide the desired features. Core WP is just a starting point, not an end all solution.

When element styles are set in the editor, they can be difficult to override with custom CSS due to CSS precedence rules. Element styles have high precedence and external stylesheets have relatively low precedence.

All generally speaking. If you could direct me to a specific example I might be able to suggest a specific solution.

The only element style there is for border-width, so we should be able to override any other styles. The trick is to ensure our override rules occur after all other styling is applied. A good way to do this is to place it in the Additional CSS customizer section. This style rule should work:

a.wp-block-button__link.wp-element-button {
    background-color: white !important;
    color: black !important;
}

If this will work without the !important modifiers, all the better. You’ll also need another similar rule which uses the :hover pseudo-selector to define any desired hover effects.

The concern now would be, this might override other links you don’t want this style applied to. If this happens, you’ll need to find more specific selectors that differentiate between this button and other links. What would be an excellent selector for this would be if you could apply an ID attribute to the link or one of its containers. Style rules with ID selectors take precedence over nearly all other styles.

I do not see my styles above anywhere

Yeah, therein lies the problem 🙂 Even if your styles are not applied they should still appear in the selector when you’ve clicked on the right element in the HTML view. They may be grayed out or lined out, but they should appear.

takes a closer look…
Ah! Your added class was applied to the containing div, not the anchor link itself. So the selectors should be:
.alternative-button-light a.wp-block-button__link.wp-element-button
“The problem was between seat and keyboard” 😛

Are wp sites supposed to live with one style button only, always?

No, but what actually happens isn’t all that great IMO. Themes define global styles. They could define a selection of styles, but many often do not. The WP defaults are meant to be a base condition that themes can build upon.

Aside from global styles, we as end users can mainly only customize individual elements, one by one. Unless our theme provides the extra functionality, that’s what we have to work with. While it’s arguable that WP core is lacking, the actual blame IMO lies with the chosen theme.

Those that have the coding ability can always extend the theme to get exactly what they want, but the rest of us are kind of stuck with what we have unless we can afford to hire an expert.