JavaFX ToggleButton阴影

Question

Hello Fellow StackOverflow Users, this is my first post/question and hopefully i'm not violating any rules/ect.

Unfortunately I am unable to post a picture, but I will put this here for a reference. http://i.imgur.com/M0uckkg.jpg (Before Button Click)

OT: On the picture above, I am attempting to make the button's background completely transparent besides the text.

http://i.imgur.com/bFOEOVC.jpg (After Button Click)

Everything works out until I click the button then shadows appear on the side.

Here is what I have tried...

CSS

.toggle-button {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

.toggle-button:selected {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
}

The java code is just a plain simple application with a ToggleButton.

Special Thanks in Advance! - Bart

Answer 1

I wouldn't recommend modifing the main color palette ( -fx-base and others) for just one control. This makes sense if you're trying to style all of them.

Looking at how is defined in modena.css :

.toggle-button {
    -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, 
        -fx-inner-border, -fx-body-color;
    -fx-text-fill: -fx-text-base-color;
}
.toggle-button:selected {
    -fx-background-color: -fx-shadow-highlight-color,
        linear-gradient(to bottom, derive(-fx-outer-border, -20%), ...),
        linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}
.toggle-button:selected:focused {
    -fx-background-color: -fx-focus-color, 
        linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...),
        -fx-faint-focus-color, linear-gradient(to bottom, derive(-fx-color, -22%) 0%, ...);
}

you will need to change all of them: -fx-shadow-highlight-color , -fx-outer-border ,...

Instead, I'll just override the style of the toggle button with your requirements:

.toggle-button,
.toggle-button:focused,
.toggle-button:selected,
.toggle-button:selected:focused {
    -fx-background-color: transparent;
    -fx-text-fill: black;
}

NOTE I've edited my answer since, as @eckig suggests, it's redundant to apply the same color to the different comma separated values.

Answer 2

Special Thanks to both of you, Jose & Eckig. I managed to edit my code with both your suggestions and it fixed the issue right away!

Here is a reference for anyone in the future.

Button Code

ToggleButton button= new ToggleButton("Login");
button.getStyleClass().add("custom");

CSS

.custom,
    custom:selected {
    -fx-background-color: transparent;
    -fx-text-fill: black;
}

Answer 3

If you want to remove the button-like optics completely, I would suggest you to remove all existing styles and add your own style class as the only style class:

ToggleButton toggleButton = new ToggleButton("Login");
toggleButton.getStyleClass().setAll("my-custom-button");

Now you can apply only the styles you need:

.my-custom-button {}