Is it possible to override hover highlight/color for buttons?

[atsepkov]

The default button highlight state during hover seems too subtle to me (and not easy to notice on some monitors). When I inspected the element, I found the following CSS rule responsible for the highlight:

.s-btn:not(.disabled):hover::before {
    opacity: 0.08;
}

Is it possible to override this with a custom opacity and/or color in my _material-theme.scss file?

[Florian-Schoenherr]

We have some ideas on more customizable theming. Right now, the hover seems to follow specs.
I would like it to be more like this: https://material-ui.com/components/buttons/ (also try tabbing on it, provides ripple-focus styling)

[atsepkov]

In the link you mention, the buttons seem to be using black background (rather than white) for the :before element that overlays the button, which indeed doesn't have the same "too subtle" problem. Github buttons seem to be using a darkening effect too, which is easier to see. Maybe just changing this lib to also use black background as well for the :before element would be enough for now?

As an experiment, I added the following to the global.css and the hover style does indeed seem more noticeable:

.s-btn:not(.disabled):hover::before {
    background: black;
}