JavaFX: Toolbar with imagebuttons

Question

Question

How can i create a Toolbar like this:

LINK: http://s14.postimg.org/99095jk3l/image.png

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

user1786646

View more on Stack Overflow

Licensed under: CC-BY-SA with attribution

Not affiliated with: Stack Overflow

Nick Rippe · Accepted Answer · 7/17/2013 8:12:08 PM

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

.button:hover{
    -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:

toolbar.getStylesheets().add("filename.css");

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:

JavaFX 2 CSS Reference Guide
caspian.css for JavaFX 2.2 (The default style sheet)

JavaFX: Toolbar with imagebuttons

Question

Accepted Answer