JavaFX: Toolbar with imagebuttons


How can i create a Toolbar like this:


I already created a toolbar with the correct background. My only problem are the buttons. I dont know how to style the buttons to be transparant, and how to add the correct on hover and on click effects to match the background.

Thanks in advance

7/17/2013 8:12:35 PM

Accepted Answer

You'll be working with CSS. You can set the background and border to transparent, then have a hover class for adding a semi-transparent border. It would end up being something like this (Please note, you may have to make some tweaks still)

.button {
    -fx-background-color: transparent, transparent, transparent, transparent;

    -fx-background-color: transparent, rgba(0,0,0,.1), rgba(0,0,0,.1), transparent;

.button:armed {
    -fx-background-color: transparent, rgba(0,0,0,.1), rgba(0,0,0,.1), rgba(0,0,0,.2);

To apply the style sheet you'd use code similar to this:


There are lots of good references for this in the "Info" section of the "javafx-2" tag. Here are a few that should prove helpful with this:

7/17/2013 8:12:08 PM

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