I have a button that changes color when I move the mouse in, but it looks stiff.
I want to have a CSS transition color transition effect.
Translated with translation tools. I don’t know if you can understand it.
public void start(Stage primaryStage) throws Exception {
// border布局器
BorderPane borderPane = new BorderPane();
// Hbox 顶部菜单开始
HBox menuTop = new HBox();
menuTop.setStyle("-fx-border-width: 1;");
menuTop.setStyle("-fx-border-color: #cccc;");
menuTop.setPadding(new Insets(5,5,5,5));
menuTop.setSpacing(10);
Button button1 = new Button("new");
Button button2 = new Button("open");
Button button3 = new Button("save");
Button button4 = new Button("settings");
Button button5 = new Button("help");
Button button6 = new Button("about");
menuTop.getChildren().addAll(button1, button2, button3, button4, button5, button6);
for (Node Elemt: menuTop.getChildren()) {
Elemt.setStyle("-fx-border-width: 2;");
Elemt.setStyle("-fx-border-color: #FFE4C4;");
Elemt.setStyle("-fx-background-color: #FFDAB9;");
Elemt.setCursor(Cursor.HAND);
// I want MouseMoved button background-color effect
// 鼠标移入
Elemt.onMouseMovedProperty().set(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
Elemt.setStyle("-fx-background-color: #FFC125;");
}
});
// 鼠标移出
Elemt.onMouseExitedProperty().set(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
Elemt.setStyle("-fx-background-color: #FFDAB9;");
}
});
}
// Hbox 顶部菜单结束
borderPane.setTop(menuTop);
// 场景
Scene scene = new Scene(borderPane);
primaryStage.setWidth(440);
primaryStage.setHeight(300);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.show();
}
Advertisement
Answer
Did you try specifying a CSS stylesheet as explained in:
CSS Stylesheet file (using IDs)
File name: ButtonStyles.css
#my-button {
-fx-border-width: 2;
-fx-border-color: #FFE4C4;
-fx-background-color: #FFDAB9; /* 鼠标移出 */
cursor: pointer; // seems like Cursor.HAND
}
/* I want MouseMoved button background-color effect 鼠标移入 */
#my-button:hover {
-fx-background-color: #FFC125;
}
#my-button:pressed {
-fx-background-color: #FFDAB9; /* maybe some other color */
}
Then those styles are applied to elements with the id of my-button.
So add the styles to the button(s) and set their id.
Button button1 = new Button("new");
// set id and add stylesheet
Button button2 = new Button("open");
// set id and add stylesheet
Button button3 = new Button("save");
// set id and add stylesheet
Button button4 = new Button("settings");
// set id and add stylesheet
Button button5 = new Button("help");
// set id and add stylesheet
Button button6 = new Button("about");
// set id and add stylesheet
button6.setId("my-button");
button6.getStylesheets().add(getClass().getResource("ButtonStyles.css").toExternalForm());
The buttons 1..5 are left to you.
Explained
The cursor is set to a pointing finger, with css-property cursor.
The styles have been copied from your Java-code.
Another guide is: styling JavaFx buttons with CSS.
You may also improve and create a List of buttons, so you can add the style to all buttons in and a loop.
Simplify using a Scene
Like explained in:
So you can overwrite the CSS-class .button (used in JavaFX to style buttons) instead of single IDs. So replace id-selector #my-button by .button in the CSS file.
new CSS Stylesheet file (using classes)
File name: button.css
.button {
-fx-border-width: 2;
-fx-border-color: #FFE4C4;
-fx-background-color: #FFDAB9; /* 鼠标移出 */
cursor: pointer; // seems like Cursor.HAND
}
/* I want MouseMoved button background-color effect 鼠标移入 */
.button:hover {
-fx-background-color: #FFC125;
}
.button:pressed {
-fx-background-color: #FFDAB9; /* maybe some other color */
}
Adding a style to the scene
Then define the scene (optionally restricted to appropriate dimension), add the stylesheet to it, set it to your container and it will apply to all buttons inside the container.
You had already defined and set your scene to the primaryStage, great 👍 So you need only to add the CSS stylesheet.
Scene scene = new Scene(borderPane);
scene.getStylesheets().add(this.getClass().getResource("button.css").toExternalForm()); // add the CSS stylesheet
primaryStage.setWidth(440);
primaryStage.setHeight(300);
primaryStage.setResizable(false);
primaryStage.setScene(scene);
primaryStage.show();
Transition of background-color
CSS Transitions (for testing)
They are explained in the tutorial CSS Fundamentals: CSS3 Transitions. You can also test them first in regular HTML like the one below:
/* NOTE: removed the "-fx-" prefixes from properties, to make it work with HTML in browser
.button {
border-width: 2;
border-color: #FFE4C4; /* color-name Bisque */
background-color: #FFDAB9; /* 鼠标移出 */
cursor: pointer; // seems like Cursor.HAND
}
.button:hover {
background-color: #FFC125; /* color-name Goldenrod */
/* linear transition gradually fading to the color for 1 second */
-webkit-transition: background-color 1s linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1s linear;
}<button class="button">Button with Transition</button>
Transition must be implemented in JavaFX
Like the answer from jewelsea in 2018 explained:
There is no direct support in JavaFX css for animation. You need to perform the animation steps in Java code to modify the css style.
I researched again for “applying CSS transitions in JavaFx” but did only find alternatives that follow the official guide Creating Transitions and Timeline Animation in JavaFX:
Sorry, for now I only can explain the background-color change and on hover to you. The linear color transition is already answered (see questions before).