How do I style the confirmation buttons within primeng's ConfirmDialog modal?

I'm confused on how to go about styling the 2 'confirm' and 'cancel' buttons within Angular's primeng library when using the ConfirmDialog.

ref: https://www.primefaces.org/primeng/#/confirmdialog

I'd like to make the 'confirm' button remain green, and change style the 'cancel' button red. Changing the styling within the css for:

.ui-widget-header .ui-button, .ui-widget-content .ui-button, .ui-button

changes colors on both buttons. Is there a way around this?

Solution

You could use the CSS Adjacent Sibling Selector to target the buttons, this assumes there will only be two buttons, the confirm and cancel:

.ui-dialog-footer .ui-button {
    background: /* some green color */
}

.ui-dialog-footer .ui-button + .ui-button {
    background: /* some red color */
}

The buttons seem to be in a container div with CSS class .ui-dialog-footer when trying the demo in the link you provided. However if your implementation has the buttons in a different container/namespace, you can replace .ui-dialog-footer with whatever you'd need to prevent the styles from affecting ALL buttons in your application.

Here is a jsfiddle demonstrating the functionality in action.

Hopefully that helps!