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

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:

• JavaFX 2: Styling Nice Login Form 
• JavaFX 2: Styling Text with CSS

If you have any comments, questions, 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.