How can I change the background color of an Angular material button in hover mode?
I have an Angular button:
<button md-button class="link-btn" >Cancel</button>
.link-btn {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-size: 0.8em;
padding: 0px;
}
.link-btn:hover {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-size: 0.8em;
padding: 0px;
}
Usually set to a transparent background, but the state hover
displays a gray background? How do I remove this?
source to share
As with Angular 6, the use of / deep / or ng-deep in the chosen solution is marked deprecated . The recommended way is to use global styles as stated in the docs .
Some Angular Material Components, in particular overlays such as MatDialog, MatSnackbar, etc., do not exist as children of your component. They are often injected elsewhere in the DOM. This is important to keep in mind because even with high specificity and the shadow piercing selector will not target items that are not direct children of your component. Global styles are recommended for targeting such components.
For the specific case of a background image on a button, I had to use the following code in my styles.css (global stylesheet included via angular-cli or linked directly in index.html). Note that you may need to replace the main accent or warn depending on the type of palette (color = "primary" or color = "accent" or color = "warn") that is used in the button.
.mat-button.mat-primary .mat-button-focus-overlay {
background-color: transparent;
}
If you don't want every button to be touched, it is better to have a specific class like no-hover-effect like below.
.no-hover-effect.mat-button.mat-primary .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-accent .mat-button-focus-overlay,
.no-hover-effect.mat-button.mat-warn .mat-button-focus-overlay
{
background-color: transparent;
}
For every material button that doesn't require a hover effect, you would do
<button mat-button color="primary" class="no-hover-effect">
No Hover Button
</button>
source to share
Button styles are encapsulated, so you need to use / deep / selector to change the inner styles.
Try the following:
.link-btn /deep/ .mat-button-focus-overlay {
background-color:transparent;
}
Update:
As of Angular v4.3.0, the selector is /deep/
deprecated and will be replaced by the selector ::ng-deep
. You can find more information in the documentation: Angular Documentation
source to share