如果 div 中有多个按钮，如何更改垫子凸起按钮的颜色？

Question

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

Answer 1

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

<button class="greenButton" ...>

Answer 2

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!