How can I change Angular Material button background color on hover state?

Question

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;
}

Normally it is setting transparent background, but in hover state, gray background is shown? How to remove that?

You can check my answer at: https://stackoverflow.com/a/72401579/3339907 — shhdharmen, May 27 '22 at 06:59

score 24 · Accepted Answer · answered May 11 '18 at 15:37

As of Angular 6, the use of /deep/ or ng-deep in the chosen solution is marked for deprecation. The recommended way is to use global styles as stated in the docs.

Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components.

In the specific case of button hover background, I had to use the following code in my styles.css (global stylesheet included via angular-cli or directly linked in index.html). Note that you might have to replace primary with accent or warn depending on the palette type (color="primary" or color="accent" or color="warn") used in the button.

.mat-button.mat-primary .mat-button-focus-overlay {
  background-color: transparent;
}

If you don't want every button to be affected, it's better to have a specific class like no-hover-effect as shown 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 need hover-effect, you'd do

  <button mat-button color="primary" class="no-hover-effect">
    No Hover Button
  </button>

I found that the trick for the template I was using was to follow the :hover style background-color with !important. The background color change would not reflect on hover unless I used !important. — StackOverflowUser, Jun 20 '18 at 08:14
Just a small note, but if anyone uses mat-button but not the color property (e.g. primary, accent, warn), then you can achieve the same outcome with this in styles.scss: `.no-hover-effect.mat-button .mat-button-focus-overlay { background-color: transparent; }` — Michael F., Jul 29 '20 at 14:22

score 19 · Answer 2 · edited Jun 20 '20 at 09:12

19

The button styles are encapsulated, so you have to use /deep/ selector to change internal styles.

Try this:

.link-btn /deep/ .mat-button-focus-overlay {
    background-color:transparent;
}

Plnkr

Update:

As of Angular v4.3.0 the /deep/ selector is deprecated and will be replaced by the ::ng-deep selector. You can find more info in the documentation: Angular Documentation

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 07 '17 at 22:24

cyr_x

13,987
2
32
46

how would you do this when /deep/ is removed? – Ahmed Hasn. Oct 16 '17 at 10:25
As written in my answer, with `::ng-deep` – cyr_x Oct 16 '17 at 10:27
1

deep AND ::ng-deep will be depricated and removed: The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools. Source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep – Ahmed Hasn. Nov 02 '17 at 06:55

score 11 · Answer 3 · answered Aug 22 '18 at 21:48

You can also use mat-flat-button instead of mat-button as the former doesn't have an overlay mechanic. You just need to override the background color in your component which is imho is a much cleaner mechanic than globally overriding dynamically created overlay components angular material creates.

micko · Answer 4 · 2017-06-07T22:12:32.130

4

Try adding the following to your css...

.mat-button-focus-overlay {
    background-color:transparent;
}

Or

.mat-menu-item:hover {
     background-color:transparent;
}

edited Jun 07 '17 at 22:12

answered Jun 06 '17 at 15:35

micko

51
5

score 3 · Answer 5 · answered Mar 14 '19 at 14:40

You can apply a global style to your application to all the buttons. I did it using Angular theming for the mat-icon-buttons.

$background: map-get($my-theme, background);

// add hover for mat-icon butttons
.mat-icon-button:hover {
   background-color: mat-color($background, hover);
 }

How can I change Angular Material button background color on hover state?

5 Answers5

Update:

Linked