I am trying to remove the default hover effect of the mat-button-toggle. But somehow, I am unable to override it. Whenever I hover over the button I get this white shady background.

The .html file:

<div class="header">
  <mat-button-toggle-group class="mat-menu" [value]=target>
    <mat-button-toggle (change)="redirekt($event.value)" value="/" [disableRipple]="true" class="mat-menu-item">Home</mat-button-toggle>
    <mat-button-toggle (change)="redirekt($event.value)" value="/test" [disableRipple]="true" class="mat-menu-item">Test</mat-button-toggle>
  </mat-button-toggle-group>
</div>
<div class="outlet">
  <router-outlet></router-outlet>
</div>

The .scss file:

.mat-menu {
  width: 100%;
  border: none !important;
  border-radius: 0px;
  position: relative;
  background: mat_color($primary);
  text-align: left;
}

.mat-menu-item {
  align-self: center;

  margin: 0px 8px;
  font-size: 15px;

  @media (min-width: 768px) {
    margin: 5px 8px;
    font-size: 20px;
  }

  border: none !important;
  color: white;

  &:hover, &:focus, &:active {
    background-color: transparent !important;
    @media only screen and (min-width: 768px) {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
}

.mat-button-toggle-checked {
    color: mat-color($accent) !important;
}

I am trying to remove the default hover effect of the mat-button-toggle. But somehow, I am unable to override it. Whenever I hover over the button I get this white shady background.

The .html file:

<div class="header">
  <mat-button-toggle-group class="mat-menu" [value]=target>
    <mat-button-toggle (change)="redirekt($event.value)" value="/" [disableRipple]="true" class="mat-menu-item">Home</mat-button-toggle>
    <mat-button-toggle (change)="redirekt($event.value)" value="/test" [disableRipple]="true" class="mat-menu-item">Test</mat-button-toggle>
  </mat-button-toggle-group>
</div>
<div class="outlet">
  <router-outlet></router-outlet>
</div>

The .scss file:

.mat-menu {
  width: 100%;
  border: none !important;
  border-radius: 0px;
  position: relative;
  background: mat_color($primary);
  text-align: left;
}

.mat-menu-item {
  align-self: center;

  margin: 0px 8px;
  font-size: 15px;

  @media (min-width: 768px) {
    margin: 5px 8px;
    font-size: 20px;
  }

  border: none !important;
  color: white;

  &:hover, &:focus, &:active {
    background-color: transparent !important;
    @media only screen and (min-width: 768px) {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
    }
  }
}

.mat-button-toggle-checked {
    color: mat-color($accent) !important;
}

• javascript
• html
• css
• angular
• sass

2 Answers 2

In 2023 MatButtonModule, @angular/material version ^15.1.3, you can modify the CSS3 variables.

.mat-mdc-button {
  --mat-mdc-button-persistent-ripple-color: none;
}

Note you'll need to add encapsulation: ViewEncapsulation.None in your @Component decorator.

You should also change this style:

.mat-button-toggle-focus-overlay {
display: none;
}