[EDITAR] La solución está en la sección de comentarios.
Quiero cambiar el color de un botón con tapete levantado, pero tener un color diferente para cada botón. tengo la siguiente situacion:
<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>Las opciones 'principal' y 'advertir' se adaptan a mis necesidades para los botones 'Actualizar' y 'Cancelar', pero necesito hacer que el botón 'Editar campos' sea verde. ¿Hay alguna manera de hacer que ese botón sea verde, con los botones para permanecer en el mismo div?
<style> .greenButton { background-color: green; } .greenButton:hover { background-color: lightgreen; } ... </style> <button class="greenButton" ...>Aquí hay una solución que encontré, así que si alguno de ustedes tiene un problema similar, lea más, la explicación está al final:
Codigo original:
<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>Nuevo código:
<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>Como puede ver, todo lo que he hecho es agregar un nombre personalizado al valor del color en el botón 'Editar campos', de "acento" a "verde". Y luego en CSS, agregué
.mat-green { color: white; background-color: forestgreen; }Y eso es todo, espero haber ayudado a alguien. ¡Salud!