1

I have an angular-material link button element:

<a mat-button>Link</a>

I wanted to change its hover background to a bold white color, so in my global styles.css file I defined:

.mat-button-focus-overlay {
   background: rgba(255, 255, 255, 0.8)!important;
}

The link itself does not have any additional styles. I can see that the background color on hover has indeed changed to white, but to a very pale white, despite the fact that the opacity is set to 0.8. Is there a way to fix that?

Thanks.

Mister_L
  • 2,469
  • 6
  • 30
  • 64
  • I'm pretty sure you need to use `opacity` instead of the alpha channel of `rgba`. [See here for the difference](https://stackoverflow.com/a/14251539/1684458). – p4r1 Feb 04 '19 at 15:03
  • @p4r1 Tried it, still no luck – Mister_L Feb 04 '19 at 15:32

1 Answers1

3

In your global styles.css you have that chance to overwrite directly, what mat-button does - normal and on hover: example :

$white: white;

.mat-button {
  color: $white;
  background: $white;
}

.mat-button:hover {
  color: $white;
  background: $white;
}
Liviu Nita
  • 96
  • 1