How to change angular material button background color on hover?

Question

I want to change the background color of angular mat button on hover.

html

<button  style="font-family: 'Nunito'" button mat-button color="primary">Button</button>

css:

button.mat-raised-button:hover {
    background-color: 'red';    
}

BUt it is not working and I dont know why?

use `background-color: red !important` .. i think it will help you.. — نور, Sep 14 '20 at 06:20
You can check my answer at: https://stackoverflow.com/a/72401579/3339907 — shhdharmen, May 27 '22 at 06:59

score 2 · Answer 1 · answered Sep 14 '20 at 06:35

2

Add a class while hover the button hover-class

button mat-raised-button color="primary" class="hover-class">Primary</button>

then

.hover-class:hover {
  background-color: red;
}

answered Sep 14 '20 at 06:35

Rayees AC

score -1 · Answer 2 · answered Sep 14 '20 at 06:31

-1

Your HMTL and CSS are invalid check the snippet:

button.mat-raised-button:hover {
    background-color: red;    
}

<button  style="font-family: 'Nunito'" class="mat-raised-button" color="primary">Button</button>

answered Sep 14 '20 at 06:31

SoliMoli

2 Answers2