Angular2 how to change color of a disabled button

user_7857994 0
Viewed 19335

i have this button

<button class="btn" [disabled]="true">
    <i class="fa fa-heart" aria-hidden="true"></i> Like
</button>

I want it to be green when disabled but don't know how to do it

angular
6 Answers

Angular 6. Switch delete button color from "warn" to grey

.btn-delete:disabled{
    .icn-delete{
        color: #9D9D9C;
    }
}
<button mat-icon-button class="btn-delete" [disabled]="array.length==0" (click)="removeAll()">
    <mat-icon aria-label="Icon-button with a delete icon" class="icn-delete" color="warn">delete_forever</mat-icon>
</button>

user_48614210

JeanPaul A's answer inspired me:

I had a button with angular material properties, and a disabled condition. Something like:

<button mat-raised-button [disabled]="timeout==1"></button>

To change the colour of this button, I added below to CSS:

.mat-raised-button[disabled] {
   background-color: green;
}
user_38975780

You can achieve it in 2 different ways.

  1. Using the Class name and change CSS/SCSS
  2. Using ngStyle

HTML

<h2>1st Way</h2>
<input type="text" name="value" [(ngModel)]="value">
<p> You entered {{value}}</p>
<button [class.btn]="value===''">Clear</button>

CSS

.btn{
    color: red;
}

HTML

<h2>2nd Way</h2>
<input type="text" name="value" [(ngModel)]="value">
<p> You entered {{value}}</p>
<button [ngStyle]="{'color':getColor()}">Clear</button>

TS

  value=""
  getColor(){    
    return this.value==='' ? 'red': 'green';
  }
user_115956050
Related