Material Design in Angular, overriding specific css

Problem: 
Angular Material Design button greys out as a hover effect. Standard css override failed.

Solution: 
Adding '/deep/' to the css definition.

.header-container /deep/ .mat-button-focus-overlay{
  background-color:transparent;}

Source(s):
https://stackoverflow.com/questions/44342158/how-can-i-change-angular-material-button-background-color-on-hover-state




Problem:
Angular Material Design button has unwanted ripple effect.

Solution:
Adding disableRipple parameter to the button tag.

<button type="button" mat-button disableRipple>  ...
</button>

Source(s):
https://stackoverflow.com/questions/41162195/angular-material-2-disable-ripple