Remove mat-btn overlay on click?

2
votes

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>

enter image description here

1
cssangularangular-materialangular-material-6
If you are able to remove the overlay what is the problem here then ? – dota2pro
@dota2pro Overlay is removed on hovering, but not on clicking, that's the issue. – Divyanshu Rawat
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
@Vahid great it worked thanks a lot :) – Divyanshu Rawat

1 Answers

3
votes

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