Thursday, May 24, 2012

JavaFX 2 CSS: Styling Buttons

You can create a custom look, also called a skin, for your JavaFX application with cascading style sheets (CSS). CSS contain style definitions that control the look of user interface elements.

In this tutorial I am styling four buttons here to show how CSS works with JavaFX 2. As you can see from the code I define styles that are associated with a node through the node's ID. The ID is set using the node's setId() method and I apply style sheets to Scene. The style sheet test.css provides the skinning shown in the image below.

Here is the final result of our  JavaFX 2 CSS: Styling Buttons example:
javafx 2 css
JavaFX 2 CSS

Here is Java code of our example:
In order to style this application properly you'll need to create test.css file in /src folder of your project. That can be easily done by following these steps below:

  • Right click on /src folder in Eclipse IDE Navigator, then select New, and then select File.
  • Now just enter name of that file, in this case test.css

In this example I am styling buttons with gradients (radial, linear). 


Here is CSS code of our example:

If you like this, and other JavaFX 2 tutorials on this blog, you can follow me on Twitter to be informed about new JavaFX tutorials, or you can take a look at these recommend tutorials:

If you have any commentsquestions, and anything like that, please feel free to  leave  a comment below, or at least if you like this tutorial you can SHARE it with your friends.


  1. I think stylesheets and skins are two different things. Skins also add behaviour.

  2. Thanks for commenting.

    You might be right, anyway I copied first sentence from: so you can check it there.

  3. Hey can we use this code to make the page like this i mean can we add this code and make colorful window???? Please let me no if and send send me the coding to