CODEWITHSUNDEEP
javajavafx
Bart
Bart

Reputation: 59

JavaFX ToggleButton Shadow

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. https://i.sstatic.net/nOPAL.jpg (Before Button Click)

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

https://i.sstatic.net/duocU.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

Upvotes: 2

Views: 14005

Answers (4)

Dima Kmentsynskyi
Dima Kmentsynskyi

Reputation: 1

Please try this CSS:

.toggle-button {
    -fx-text-fill: black;
    -fx-base: transparent;
    -fx-background: transparent;
    -fx-focus-color: transparent;
    -fx-border-color: transparent;
    -fx-effect: null;
    -fx-effect: dropshadow( three-pass-box ,rgba(0,0,0,10) , 20, 0.0 , 0 , 1);
}

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

Upvotes: 0

Bart
Bart

Reputation: 59

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;
}

Upvotes: 0

José Pereda
José Pereda

Reputation: 45456

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.

Upvotes: 3

eckig
eckig

Reputation: 11134

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 {}

Upvotes: 0

Related Questions