Java FX buttons slightly smaller when clicked/focus

Question

I have an issue where my buttons in JavaFX become slightly smaller when clicked.

here you can see that the "change password" button is clicked/selected.

here you can see the "admin functions" button is clicked/selected.

I suspected this was something to do with the buttons having focus, as when i click chrome or another application with this running, it reverts to desired look

the buttons are currently within a 4x1 GridPane, with the 0th slot being occupied by the label.

here is my CSS if it helps:

.button{
-fx-border-color: null;
-fx-border-width: 0;
-fx-background-color: #2c3cff;
-fx-fill: true;
-fx-pref-height: 100;
-fx-pref-width: 320;
-fx-text-fill: #b9b9b9;
-fx-border-radius: 0;
-fx-min-width: 320;
-fx-min-height: 100;
-fx-background-radius: 0;
-fx-animated: false;

}


.grid{
    -fx-background-color:#3e3e48;
}

.label{
    -fx-text-fill: #b9b9b9;
}

Edit: I have found a temporary "solution", more of a workaround: I put a horizontal separator just below my HBox and this allowed me to mask the weird button size changes. would still like answers about how to do this properly.

Thanks!

Answer 1

So, I figured it out after a long time of trying to use workarounds such as the separator.

The default FX stylesheet applied this to all buttons:

    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

and whilst in my .button:focused definition i had set these to 0, in my .button definition i had not, so it had taken the insets value from the default CSS. by applying -fx-background-insets: 0,0,0,0,0; to both .button and .button:hover i was able to achieve the desired result.

Note: you can just type -fx-background-insets: 0; i left the full values in in case i want to change at a later date.