Javafx button hover effect

Question

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

Welcome and thanks for the translation-warning: We can understand, what you want. Please also post your JavaFx code as [example]. So we can search there for the issue. — hc_dev, Aug 13 '21 at 08:08
@陈慢慢 [edit] your question and include it there. But *please* make it minimal, complete and reproducible as asked. — Federico klez Culloca, Aug 13 '21 at 08:12

hc_dev · Accepted Answer · 2021-08-13T10:16:59.447

Did you try specifying a CSS stylesheet as explained in:

Button Hover and pressed effect CSS Javafx

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).

sorry。When the mouse moves to the button, it will change color slowly and gradually — 陈慢慢, Aug 13 '21 at 09:09
In fact, it's like fadetransition darkening effect, but what I want is color change — 陈慢慢, Aug 13 '21 at 09:13