7

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.

DVarga
  • 21,311
  • 6
  • 55
  • 60
Terra Incognita
  • 167
  • 2
  • 2
  • 11

4 Answers4

10

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

DVarga
  • 21,311
  • 6
  • 55
  • 60
  • Thank u for ur answer, but can i all put in in fxml file? Or it must be only CSS file? – Terra Incognita Apr 12 '16 at 08:04
  • All this styling CAN be done inside the class file using the `.setStyle()` method for the `Button`. But I don't know why you would use a button instead of a `Hyperlink`. – Zephyr Jun 02 '18 at 15:02
  • You can do everything and more with a Button what you can do with a Hyperlink: e.g. later you want to exchange the text with some icon. If you dont like the default colors of the Hyperlink control, you have to write CSS anyways. For CSS: Putting CSS into code pollutes the code. It is always better to separate the style, as it leads to cleaner, easier to change front-ends. – DVarga Jun 03 '18 at 12:02
5

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.

James_D
  • 201,275
  • 16
  • 291
  • 322
1

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

enter image description here

Shivam Papat
  • 457
  • 4
  • 14
1

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.

Ben
  • 706
  • 7
  • 11