Material button hover color displayed incorrectly

Question

I followed the guide written here! to create and customize my own theme to use with some material 2 components. I created my own color palettes.

To custom the colors for some material buttons used in my component, I wrote this mixin

@mixin action-buttons-group-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    .mat-button {
        &:hover, &:active, &:focus {
            background-color: $mat-color($primary, lighter);
        }
        &.mat-primary {
            color: mat-color($primary);
        }
        &.mat-accent {
            color: mat-color($accent);
        }
    }
}

Everything works fine except the color of button on hover is incorrect. With inspection tool of browser I can see that the color for hover action is correctly compiled however what I actually see in the browser is different. For example:

Background color set in hover action is #e6e6e6, but what actually displayed is #d2d8e1 for button uses primary color palette, and is #e7d8cc for button uses accent color palette.

The primary default color is #202020, while accent default color is #ee7617

Somehow the actual hover colors of buttons are related to the text color of the button.

I tried with some different colors but the hover colors of buttons are always displayed wrong.

The tool I used to pick actual color displayed by browser is GPick.

Material version I used is 2.0.0-beta.8, angular core version 4.1.2

Will Howell Will Howell · Accepted Answer · 2017-08-29T15:51:52

The hover color you see is not the actual button background, but a "focus overlay" div that is positioned to cover the full size of the button. It typically has an opacity of 0, but when the button is hovered, its opacity is set to 1.

The styles you're trying to override need to target the .mat-button-focus-overlay's background color. Be sure that your selectors are more specific too so that they appropriately override the default.

Material button hover color displayed incorrectly

1 Answers