Howto create and style 2 Labels within a single Button in JavaFX?

Question

Have you come across this kind of button? Do you know how to go about creating it?

Update

Menai just helped me to realize that this Button must have 2 Labels in them. Left Label has black background-color and white text-fill-color while the right Label has silver background-color and red text-fill-color.

I would like to know how to create (with Java or .fxml) and style (CSS) a Button with 2 Labels in it similar to the Button provided as image.

Answer 1

Use 2 Labels in a HBox as graphic for the Button. Assign the text color / background color to each label individually:

<Button styleClass="btn2" stylesheets="@button_style.css" prefWidth="100">
    <graphic>
        <HBox>
            <children>
                <Label HBox.hgrow="NEVER" styleClass="left" text="213"/>
                <Label HBox.hgrow="ALWAYS" styleClass="right" text="2x"/>
            </children>
        </HBox>
    </graphic>
</Button>

button_style.css

.btn2 {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border;
    -fx-padding: 0;
    -fx-content-display: graphic-only;
}

.btn2 HBox {
    -fx-fill-height: true;
}

.btn2 .left, .btn2 .right {
    -fx-padding: 4;
}

.btn2 .left {
    -fx-text-fill: white;
    -fx-background-color: black;
}

.btn2:pressed .left {
    /* use different background for a pressed button */
    -fx-background-color: #555;
}

.btn2 .right {
    -fx-text-fill: red;
    -fx-background-color: -fx-body-color;
    -fx-max-width: infinity;
}

Answer 2

You can customize like this button by using CSS

.button{
    -fx-background-color:   linear-gradient(to right, black 30%, #cccccc 20%);
    -fx-text-fill:  linear-gradient(to right,white 60%, red 20%);
    -fx-padding: 15

}