JAVAFX - Transparent bar on button using CSS

Question

I want my button to have a transparent black bar on the bottom with a opacity of 75%. The button name should appear on top of the black bar. I have drawn a draft below.

So far I have tried with no success:

.button{
    -fx-background-color: #5a9bdc;
    -fx-font-size: 16;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    -fx-text-fill: #ffffff;
}

.button:hover {
    -fx-background-color: #97c0dc;
}

UPDATE:

So this is how my css looks:

.button-stats.parent{
    -fx-background-color: #5a9bdc;
    -fx-font-size: 16;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    -fx-text-fill: #ffffff;
}

.button-stats:hover {
    -fx-background-color: #97c0dc;
}

.button-stats.element{
    padding: 20px;
    color: rgba(255,255,255,.4);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 1

Here is a sample, it isn't going to be exactly what you want, but may help you in getting to where you want. It is based upon button styles found in modena.css in the jfxrt.jar that ships with Java 8.

Images are shown for unhovered and hovered and armed states (armed is when the button is pressed and the shadow is removed).

I did not provide info here for a focused state, so you will need to develop that yourself if you want it.

super-button.css

.button {
    -custom-solid-button-color: lightgreen;
    -custom-translucent-button-color: rgba(00, 80, 00, 0.75);
    -custom-button-color:
            linear-gradient(to bottom,
            -custom-solid-button-color 0%,
            -custom-solid-button-color 64%,
            -custom-translucent-button-color 65%);

    -fx-background-color: -custom-button-color;
    -fx-background-insets: 0;
    -fx-background-radius: 0;

    -fx-text-fill: whitesmoke;

    -fx-padding: 3.333333em 0.666667em 0.333333em 0.666667em;
    -fx-font-size: 30px;

    -fx-effect: dropshadow(gaussian, black, 10, 0, 3, 3);
}

.button:hover {
    -custom-solid-button-color: derive(lightgreen, 20%);
    -fx-effect: dropshadow(gaussian, goldenrod, 10, 0, 3, 3);
}

.button:armed {
    -custom-solid-button-color: derive(lightgreen, -10%);
    -fx-effect: null;
    -fx-background-insets: 2 2 0 0;
}

SuperButton.java

import javafx.application.Application;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.*;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SuperButton extends Application {
    private static final String BACKGROUND_IMAGE_LOC =
            "http://edugeography.com/images/great-barrier-reef/great-barrier-reef-04.jpg";

    @Override
    public void start(Stage stage) {
        Button button = new Button("I \u2764 Sea Turtles");    
        ImageView background = new ImageView(
                new Image(BACKGROUND_IMAGE_LOC, 400, 0, true, true)
        );

        StackPane layout = new StackPane(
                background,
                button
        );
        StackPane.setAlignment(button, Pos.BOTTOM_CENTER);
        StackPane.setMargin(button, new Insets(0, 0, 15, 0));

        Scene scene = new Scene(layout);
        scene.getStylesheets().add(getClass().getResource(
                "super-button.css"
        ).toExternalForm());
        stage.setResizable(false);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }    
}

Getting the translucent area at the base is slightly tricky, especially because you are applying a drop shadow effect. What happens with a drop shadow effect is that the drop shadow is visible through the translucent area. Normally, when you have an opaque foreground, you can see the shadow through the foreground, but when you have a translucent foreground, the shadow mars the translucent effect a bit. To understand what I mean, review the above images and note the difference between the translucent area in the images with and without a drop shadow involved.

So you might want to rethink the design to not use the drop shadow. There are ways around this using clips, but it gets a bit more complicated and you cannot achieve it using just CSS (you will also need to write some custom skin code in Java, which I won't demonstrate here).

Answer 2

Try

.button {    
    -fx-opacity: 0.7;
}