Add css style to ButtonType in JavaFX

I have an alert. I'm adding two ButtonTypes to it. I'm also adding a stylesheet to it. But how can I make the Discard changes red? I have already a btn-red class in my CSS file.

Alert alert = new Alert(AlertType.CONFIRMATION);
//setting up content text
alert.getDialogPane().getStylesheets().add("file:src/start/styles.css");

ButtonType discardChanges = new ButtonType("Discard Changes");
ButtonType buttonTypeCancel = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);
alert.getButtonTypes().setAll(discardChanges, buttonTypeCancel);

.btn-red {
    -fx-background-color: #c41010;
    -fx-text-fill: #ffffff;
}

It would be nice if the Discard changes has a red button of danger.

Thank you in advance! :)

Solution

You can give each button a CSS ID (or style class) so that you can reference it in your stylesheet. You should make use of DialogPane#lookupButton(ButtonType) to get a reference to the button. That method returns a Node since the button can be implemented with any type of Node; however, by default the returned object will be an instance of Button.

For example:

Alert alert = new Alert(AlertType.CONFIRMATION);
//setting up content text
alert.getDialogPane().getStylesheets().add("<path-to-css-resource>");

ButtonType discardChanges = new ButtonType("Discard Changes");
ButtonType buttonTypeCancel = new ButtonType("Cancel", ButtonData.CANCEL_CLOSE);
alert.getButtonTypes().setAll(discardChanges, buttonTypeCancel);

// Add CSS ID
Node discardButton = alert.getDialogPane().lookupButton(discardChanges);
discardButton.setId("discardBtn");
// Or style class
// discardButton.getStyleClass().add("red-btn");

Then in the CSS:

/* Or use the .red-btn style class */
#discardBtn {
  -fx-background-color: #c41010;
  -fx-text-fill: #ffffff;
}

Two notes:

You may want to replace the above CSS with something like:
```
#discardBtn {
  -fx-base: #c41010;
}
```
The -fx-base is a "looked-up color" which is how modena.css implements a theme. By setting that value your button will still have all the hover/armed effects applied by modena.css, just red instead of the default grayish color. The text will also be white due to how modena.css sets the text color.

You can take a look at modena.css to see what looked-up colors it defines and how it uses them.
The path you're using to add the stylesheet is suspect. If the stylesheet is a resource then the path should look something more like:
```
alert.getDialogPane().getStylesheets().add(getClass().getResource("/styles.css").toString());
```
Assuming src is the root of your source files/resource files (i.e. "root" of the class-path).