Styling a JavaFX 2 button using FXML only - How to add an image to a button?

Question

I want to change the styling of a button, most of the threads here and the articles on the internet show how to do it using Java code, which I don\'t see it as a real good s

Answer 1

A couple of changes I made to the css example (ref. #btn { in comment #3):

-fx-background-size: 100% 100%;
-fx-background-color: transparent;  

This removed the button outline and left only the image. I was able to resize the button selector in the Scene Builder like an ImageView and see the picture change in realtime. I added a ToolTip to explain the image since there was no text and no button outline. I plan to use techniques explained elsewhere and alter the image when clicked to give more visual feedback that the image is a button.

Also note: I needed to specify the button id in the 'CSS Id' (Scene Builder) instead of the 'fx:id' to get them to be linked.

Adding these changes to what was explained above allowed me to accomplish my goal: have a button that looks only like the image (e.g. round shape in squarish button).