style pressed button in JavaFX

Question

I've got a Button in my FXML file and i give a style to it by below CSS

.button {
    -fx-background-color: linear-gradient(#ff5400, #be1d00);
    -fx-background-radius: 30;
    -fx-background-insets: 0;
    -fx-text-fill: white;
}

as you can see the button has a new awesome style, but whenever i click on it, it remains as like as before and you can't understand is it clicked or not...

As I searched, I found one solution in this link: Pressed CSS, but if you notice it is The CSS that is used by Web Browsers and JavaFX does not support it.

so what is the solution? I want my button changes its appearance when the users hit or click it.

Answer 1

You need to add the psuedoclass state pressed to you css and add new css to it, which will differentiate your current button css with that when pressed :

.button:pressed {
    // Your new css
}

For changing the style while hovering the button use :

.button:hover { 
    // Your new css
}

For better understanding of what style you can add for styling the button, you can go through How to make a button appear to have been clicked or selected?

Answer 2

for arrayLists on javaFX, try this on the CSS to change colors on mouse click:

.list-cell:selected { -fx-background-color: yellow; }