How to change mat-raised-button color if there are multiple buttons in a div?

user_15564069 0
Viewed 380

[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?

angular
2 Answers
<style>
.greenButton {
  background-color: green;
}
.greenButton:hover {
  background-color: lightgreen;
}
...
</style>

<button class="greenButton" ...>
user_130765770

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!

user_155640690
Related