[EDIT] The solution is in the comment section.
I want to change a color of a mat-raised-button, but to have a different color for every single button. I have the following situation:
<div *ngIf="visible" class="dialog">
<button (click)="openEditDialog()" color="accent" mat-raised-button>Edit fields</button>
<button (click)="update()" *ngIf="showSaveCancel" color="primary" mat-raised-button>Update</button>
<button (click)="cancel()" *ngIf="showSaveCancel" color="warn" mat-raised-button>Cancel</button>
</div>
The 'primary' and 'warn' options suit my needs for the 'Update' and 'Cancel' buttons, but I need to make the 'Edit fields' button green. Is there a way to make that button green, with the buttons to stay in the same div?
<style>
.greenButton {
background-color: green;
}
.greenButton:hover {
background-color: lightgreen;
}
...
</style>
<button class="greenButton" ...>
Here's a solution I've found, so if any of you guys have a similar issue, read further, the explanation is at the end:
Original code:
<div *ngIf="visible" class="dialog">
<button (click)="openEditDialog()" color="accent" mat-raised-button>Edit fields</button>
<button (click)="update()" *ngIf="showSaveCancel" color="primary" mat-raised-button>Update</button>
<button (click)="cancel()" *ngIf="showSaveCancel" color="warn" mat-raised-button>Cancel</button>
</div>
New code:
<div *ngIf="visible" class="dialog">
<button (click)="openEditDialog()" color="green" mat-raised-button>Edit fields</button>
<button (click)="update()" *ngIf="showSaveCancel" color="primary" mat-raised-button>Update</button>
<button (click)="cancel()" *ngIf="showSaveCancel" color="warn" mat-raised-button>Cancel</button>
</div>
As you can see, all I've done is to add a custom name to color value to the 'Edit fields' button, from "accent" to "green". And then in CSS, I added
.mat-green {
color: white;
background-color: forestgreen;
}
And that's it, I hope it helped someone. Cheers!