Hover effect over icon

Question

I would like to create buttons like these for settings panel navigation:

Can you tell me how I can create this hover effect over the icons? The most difficult part for me is to create CSS code which looks like the the picture.

Answer 1

Although the above answer works. You should really do this completely in CSS using pseudo-selectors:

java:

btnsa.getStyleClass().add("myButton");

css:

.myButton {
  -fx-background-color:transparent;
}

.myButton:hover {
  -fx-background-color:#dae7f3;
}

Answer 2

You have to use MouseEntered and MouseExited events for getting hover effects over the icons. try this its working.........

btnsa.setStyle("-fx-background-color:transparent;");
btnsa.setGraphic(new ImageView(new Image(getClass().getResourceAsStream("JavafxSm.gif"))));

btnsa.setOnMouseEntered(new EventHandler<MouseEvent>() {

    @Override
    public void handle(MouseEvent t) {
        btnsa.setStyle("-fx-background-color:#dae7f3;");
    }
});

btnsa.setOnMouseExited(new EventHandler<MouseEvent>() {

    @Override
    public void handle(MouseEvent t) {
        btnsa.setStyle("-fx-background-color:transparent;");
    }
});

some snap shots of above code......

Answer 3

Instead, you can do just 1 line code in CSS, if your FXML file connected with CSS

yourButtonId:hover{-fx-background-color: #6695e2}