JavaFX ToggleButton Shadow


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

1
0
11/23/2014 3:55:40 AM

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.

2
11/23/2014 1:24:53 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon