CODEWITHSUNDEEP
cssjavafx-2
Harald K
Harald K

Reputation: 27054

Is it possible to "tint" a button in JavaFX 2

I have a JavaFX 2 application, where all my buttons use the default style (grey gradient). In some special areas of the application, the background color is red, yellow or green. In these areas, I also have buttons.

Instead of re-styling all the different states (normal, hover, pressed) of the button in all three colors, I'd like to just give the button the tint of the background. Is this possible, and how?

If not, is there a way to easily re-style the base button style, and have the hover and pressed states (pseudo-selectors) automatically derived from this style?

If that's not possible, I'm open for suggestions.. My most important goal is to avoid redundant/duplicate declarations (especially of gradients), in case someone wants to add a different color panel later, or just change the shade of one of the background colors.

CSS for the red panel/button:

#my-red-panel {
    -fx-border-width: 1;
    -fx-border-radius: 5;
    -fx-background-radius: 5;
    -fx-smooth: true;
    -fx-border-color: rgb(209, 65, 42);
    -fx-background-color: rgba(255, 78, 50, 0.89);
}

#my-red-panel .button {
  -fx-background: rgba(0, 0, 0, 0); /* Now borders look good, but button is still grey*/
}

My best bet so far, is to use a semi-transparent gradient, like so:

#my-red-panel .button {
    -fx-background-color: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
}

I still have to declare each state, but at least I can change the underlying colors without having to modify each state. The main problem is that this overrides the entire look of the button, so I was hoping for something better... :-/

Upvotes: 3

Views: 3771

Answers (1)

James_D
James_D

Reputation: 209225

Not tested, but try experimenting with:

#my-red-panel {
  -fx-base: rgba(255, 78, 50, 0.89);
}

or perhaps:

#my-red-panel .button {
  -fx-base: ... ;
}

depending on the exact effects you want.

The trick here is that the default css (caspian.css for JavaFX2.2 or modena.css for JavaFX8) use some pre-defined lookup colors. You can dig out the source for these to see how they are used. If you redefine these lookups for a node in the scene graph, the new definition is propagated to all child nodes.

Upvotes: 6

Related Questions