Remove mat-btn overlay on click?

Question

I have a mat-menu dropdown, having a mat-button in it. I want to remove the overlay that appears once user clicks the dropdown.

I am able to remove the hover overlay by writing the following css.

.no-hover-effect ::ng-deep .mat-button-focus-overlay {
  background-color: transparent;
}

This is how html code for mat-button looks like.

    <div class="mat-menu-wrapper mat-menu-size" [matMenuTriggerFor]="abc">
      <button mat-button class="mat-button no-hover-effect">
        <span class="mat-button-wrapper"><span class="mat-menu-text">
            xyz</span>
        </span>
      </button>
      <mat-menu #abc="matMenu">
        <button mat-menu-item>
          xyz
        </button>
        <button mat-menu-item>
          xyz
        </button>
      </mat-menu>
      <mat-icon class="mat-icon-ui">arrow_drop_down
      </mat-icon>
    </div>

If you are able to remove the overlay what is the problem here then ? — dota2pro, May 07 '19 at 17:45
@dota2pro Overlay is removed on hovering, but not on clicking, that's the issue. — Divyanshu Rawat, May 07 '19 at 17:48
I think what you are calling "overlay" is actually the ripple effect of mat-button. just add `[disableRipple]="true"` to your `mat-button` and it's gone. — Vahid, May 07 '19 at 17:50

score 14 · Accepted Answer · answered May 07 '19 at 17:59

14

You need to disable the ripple effect of mat-button. As mentioned here you can disable it by adding [disableRipple]="true" to your mat-button.

Learn more about ripple effect

answered May 07 '19 at 17:59

Vahid

6,639
5
37
61

Remove mat-btn overlay on click?

1 Answers1