9

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;
}

enter image description here

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.

Community
  • 1
  • 1
Elyas Hadizadeh
  • 3,289
  • 8
  • 40
  • 54

2 Answers2

16

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?

Community
  • 1
  • 1
ItachiUchiha
  • 36,135
  • 10
  • 122
  • 176
  • 1
    Thank you it is true, but have you ever notice that when you put the mouse on the button ( before clicking) the appearance of button changes, an then whenever click it, again it changes. can you understand what i am trying to say? – Elyas Hadizadeh May 16 '15 at 08:03
  • For that you need to use the pseudoclass `hover`, i.e. `.button:hover { ... }`. The [CSS Reference Guide](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) lists pseudoclasses and properties for all components, such as [`Button`](http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#button) – James_D May 16 '15 at 13:39
1

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

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

dizad87
  • 448
  • 4
  • 15