Changing the flat button colors

[Nxt3]

How are you supposed to change the color of flat buttons? Doing something like class="blue" just colors the button blue all the time--not when hovered over.

In MaterializeCSS, you're supposed to do class="waves-effect waves-blue btn-flat"--but that doesn't work here.

What am I missing?

[scote]

Can you add an example in Stackblitz please? I will be easier to help you.

[Nxt3]

Sure. Here is an example:

https://stackblitz.com/edit/ngx-materialize-z9vteo

[caom92]

I actually have the same issue; all flat buttons become green when the mouse is hovered over them and this color cannot be changed (in my case, I would prefer it to be either light gray or transparent).

It's curious 'cause in the documentation website (in the modal, card and buttons sections at least), none of the flat buttons have any color on hover. Trying to override the CSS rules with background-color: whatever !important doesn't help, since it applies the style to all buttons (flat, float and normal buttons alike); fixing the style for flat buttons, but breaking it for the rest.

I think this may be because the mz-button directive adds a CSS class to the element called btn even when the button is flat (in which case it also adds the btn-flat style). The flat button that you have in the documentation website (in the buttons page) only has the btn-flat class, not btn btn-flat as it happens in my code.

[caom92]

So far, the only workaround I can think of is to apply a CSS class to each flat button that overrides the on-hover color. Something like:

.btn.btn-flat.colorless-on-hover:hover {
    background-color:transparent !important;
}

But I think this also overrides the waves effect on click, though I'm not 100% sure.