JavaFX Button 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;
}

JavaFX Css Button,JavaFX button with css

Leave a comment