[b]JavaFX CSS :[/b]
We can use cascading style sheets (CSS) to create a custom look for JavaFX GUI application.
We can apply CSS to scene,nodes and UI controls etc.
Using CSS in JavaFX applications is similar to using CSS in HTML.
So that we can change look and feel of our JavaFX GUI application using CSS.
JavaFX Button CSS :
You can apply CSS to the JavaFX button.
First of all, You should read JavaFX CSS and JavaFX Buttons Tutorials.
Now make a simple Button
Button button =new Button("My Button");
Now apply ID to the button as
button.setId("btn");
Now defining the style sheet
#btn{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-font-size: 30px;
-fx-background-radius: 20px;
}
And fanally add css file to the scene as
String style= getClass().getResource("New.css").toExternalForm();
scene.getStylesheets().add(style);
JavaFX CSS Button Example :
package javafxtuts;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
/**
*
* @author JavaFXtuts.com
*/
public class Javafxtuts extends Application {
@Override
public void start(Stage primaryStage) {
HBox root = new HBox();
//Set space or padding using setPadding() method
root.setPadding(new Insets(20));
//assiging a class to the button
Button button=new Button("my button");
//Adding a class to the button
button.getStyleClass().add("btn");
//assiging a class to the button1
Button button1 =new Button("Button1");
//set id to the button.
button1.setId("btn1");
root.getChildren().addAll(button,button1);
Scene scene = new Scene(root, 300, 250);
//To add a external css file we do as
String style= getClass().getResource("New.css").toExternalForm();
//now add the external css file to the scene
scene.getStylesheets().add(style);
primaryStage.setTitle("javafxtuts.com");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* @param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}
CSS file for button:
.btn{
-fx-color:black;
-fx-fill:blue;
-fx-padding:4px;
-fx-background-color:#34c669;
-fx-font-size: 30px;
-fx-background-radius: 20px;
}
#btn1 {
-fx-padding: 14 18 18 18;
-fx-background-insets: 0,0 0 5 0, 0 0 6 0, 0 0 7 0;
-fx-background-radius: 8;
-fx-background-color:
linear-gradient(from 0% 93% to 0% 100%, #a34313 0%, #903b12 100%),
#9d4024,
#d86e3a,
radial-gradient(center 50% 50%, radius 100%, #d86e3a, #c54e2c);
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.75) , 4,0,0,1 );
-fx-font-weight: bold;
-fx-font-size: 20px;
}