JavaFX Button with transparent background

Question

I have some classical Button in JavaFX with a box containing some text.

I need buttons without that box, just the text, and when I hover the button or click on the button with mouse, it shall change its color to different.

Answer 1

In JavaFX styling is done by using CSS.

.button{
    -fx-border-color: transparent;
    -fx-border-width: 0;
    -fx-background-radius: 0;
    -fx-background-color: transparent;
    -fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
    -fx-font-size: 1em; /* 12 */
    -fx-text-fill: #828282;
}

.button:focused {
    -fx-border-color: transparent, black;
    -fx-border-width: 1, 1;
    -fx-border-style: solid, segments(1, 2);
    -fx-border-radius: 0, 0;
    -fx-border-insets: 1 1 1 1, 0;
}

.button:pressed {
    -fx-background-color: black;
    -fx-text-fill: white;
}

Add this code to a CSS file, save it to the directory where the source file of the control exists which contains you buttons. Then in this class:

getStylesheets().add(getClass().getResource("nameofyourcssfile.css").toExternalForm());

Then all of the buttons that that object contain will use this style-classes.

Modification on your need is straightforward.

Good tutorial to start: http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm

Answer 2

JavaFX has a Hyperlink control which basically has all the functionality you are looking for. It fires ActionEvents in the same way as a button:

Hyperlink button = new Hyperlink("Some text");
button.setOnAction(e -> System.out.println("Hyperlink clicked"));

Like a link in a web page, it will appear in a different color if it has been "visited", i.e. if an action has been fired on it.

Answer 3

This is how you can do it in scenebuilder

Choose the button by clicking on it.

Then in properties->Style Choose "-fx-background-color" and put value as " transparent"

Like this

Answer 4

For anyone who got here looking for a way to remove the default button background, it can be done like this:

button.setBackground(null);

If you want to restyle the button I'd suggest using css like the answer above.