CODEWITHSUNDEEP
angular-materialangular-material2
cnak2
cnak2

Reputation: 1841

Can't remove background color from md button

On a hover state I'm trying to remove the background color of an md-button when I hover, but I'm not able to affect it.

I'm using Material 2

In my html I have the following:

<div class="case-nav-container">
  <div *ngFor="let item of nav">
    <a md-button           
       routerLinkActive #rla="routerLinkActive"
       class = "case-button"
       [class.active]="rla.isActive">{{item.display}}</a> <br>
  </div>
</div>

In my SCSS I have:

a.case-button{

  min-width: 200px;
  text-align: left;

  &:hover{
    border-left: solid blue 6px;
    background-color: none;
  }

}

My question is how do I remove the bg-color of the button?

Upvotes: 1

Views: 2283

Answers (2)

Will Howell
Will Howell

Reputation: 3715

The background color comes in the form of a focus overlay div. This will remove it,

template:

<a mat-button class="no-hover">Basic Button</a>

css:

.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
  background: none;
}

demo:

https://stackblitz.com/edit/angular-material2-issue-dyck3s

Upvotes: 4

ablackman93
ablackman93

Reputation: 45

I think you need to increase the specificity of your SCSS. Try .case-nav-container a .case-button. Your SCSS will need to address the element you are modifying more specifically than the Angular Material code is. In some instances where increasing specificity isn't practical for an element a !important SCSS attribute will work as well to override the Angular Material default background color.

Upvotes: -1

Related Questions