JavaFX Button CSS for developing application


Posted July 26, 2016 by ramesh40

We can use cascading style sheets (CSS) to create a custom look for JavaFX GUI application.You can apply CSS to the JavaFX button. First of all, You should read JavaFX CSS and JavaFX Buttons Tutorials.

 
[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;
}
-- END ---
Share Facebook Twitter
Print Friendly and PDF DisclaimerReport Abuse
Contact Email [email protected]
Issued By Ganesh
Website JavaFX Tutorials
Business Address A G Office
p.l. metro station
Country India
Categories Computers , Education , Free
Tags button , css , javafx , javafx button css
Last Updated July 27, 2016