(JavaFX 8) css button border and background color issue

Question

I'm trying to create a Fallout 4 like button style via css with simple background-color and border properties and actually it works well. Only problem is that the border doesn't cover the whole button. There's a piece of the background sticking out at the bottom of the button. (see screenshot 1)

When I click on the button and keep the mouse pressed it disappears, though not completely. (see screenshot 2)

Here's the part of my css:

.button {
    -fx-background-color:transparent ;
    -fx-background-radius:0;
    -fx-border-color:transparent;
    -fx-border-width: 0 3 3 0;
}

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
}

Any idea what could cause this?

Solution 1

In order to reproduce the problem you will need more that one Button nodes on the Scene. The visual effect is caused due to background insets when the button is not focus. To avoid that add -fx-background-insets: 0; on the .button:hover CSS rule and the problem will be fixed.

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
    -fx-background-insets: 0;
}

Solution 2

Here's a simple program you wanted using the following css. Though the problem can't really be reproduced with this.

public class test extends Application
{
    public static void main(String[] args) 
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception 
    {
        BorderPane pane = new BorderPane();
        pane.getStylesheets().add(
                getClass().getResource("test.css").toExternalForm()
        );

        Button test = new Button("Back");
        test.setPrefWidth(120);
        pane.setCenter(test);

        Scene scene = new Scene(pane, 150, 150);
        primaryStage.setScene(scene);
        primaryStage.setTitle("csstest");
        primaryStage.show();
    }
}

test.css

@font-face{
    src: url('roboto.ttf');
}

.root {
    -fx-background-color:black;
}

.text {
    -fx-font-family: "Roboto Condensed";
    -fx-fill: lime;
    -fx-font-size: 20;
}

.button {
    -fx-background-color:transparent ;
    -fx-background-radius:0;
    -fx-border-color:transparent;
    -fx-border-width: 0 3 3 0;
}

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
}

.button:hover .text{
    -fx-fill: black;
}

Comments

[GenerationLost]

Wow, it really was that simple... Good to know after all, thanks a bunch!