How to create JavaFX Login application with CSS | 100% best for beginners

You will learn to create a JavaFX Login application with CSS

You will learn how to create a simple UI and login application in JavaFX with this JavaFX login application example with CSS tutorial. When a user submits information through the login application, the information is validated to see if it is valid or not. When valid data is entered, the application displays a message dialog; otherwise, it displays an error message.

Source code of JavaFX Login application with CSS

Main class

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

/**
*
* @author KENSOFT
*/
public class Main extends Application {

@Override
public void start(Stage stage) throws IOException {
    BorderPane root = FXMLLoader.load(getClass().getResource("FX_Login.fxml"));
    Scene scene = new Scene(root);
    stage.setScene(scene);
    stage.setTitle("Login");
    stage.setResizable(false);
    stage.show();
}

/**
* @param args the command line arguments
*/
    public static void main(String[] args) {
       launch(args);
    }
}

FX_Login.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="335.0" styleClass="borderPane_Style" stylesheets="@Styles.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.login.FX_LoginController">
<top>
<Label text="KENSOFT PH LOGIN" textFill="WHITE" BorderPane.alignment="CENTER">
<font>
<Font size="27.0" />
</font>
<BorderPane.margin>
<Insets top="25.0" />
</BorderPane.margin>
</Label>
</top>
<center>
<VBox prefHeight="200.0" prefWidth="100.0" BorderPane.alignment="CENTER">
<children>
<TextField fx:id="text_username" alignment="CENTER" prefHeight="45.0" prefWidth="335.0" promptText="Username">
<VBox.margin>
<Insets left="20.0" right="20.0" top="60.0" />
</VBox.margin>
<font>
<Font size="20.0" />
</font>
</TextField>
<PasswordField fx:id="text_password" alignment="CENTER" prefHeight="45.0" prefWidth="335.0" promptText="Password">
<VBox.margin>
<Insets left="20.0" right="20.0" top="20.0" />
</VBox.margin>
<font>
<Font size="20.0" />
</font>
</PasswordField>
<Button fx:id="button_login" mnemonicParsing="false" onMouseClicked="#Login" prefHeight="45.0" prefWidth="295.0" stylesheets="@Styles.css" text="Login">
<VBox.margin>
<Insets left="20.0" right="20.0" top="25.0" />
</VBox.margin>
<font>
<Font size="20.0" />
</font>
</Button>
</children>
</VBox>
</center>
</BorderPane>

FX_LoginController.java

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Alert;
import javafx.scene.control.Button;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.input.MouseEvent;

/**
* FXML Controller class
*
* @author KENSOFT
*/
public class FX_LoginController implements Initializable {

@FXML
private TextField text_username;
@FXML
private PasswordField text_password;
@FXML
private Button button_login;

/**
* Initializes the controller class.
*/
@Override
public void initialize(URL url, ResourceBundle rb) {
    // TODO
}

@FXML
private void Login(MouseEvent event) {
    if(text_username.getText().equals("admin") && text_password.getText().equals("adminpassword")){
        Alert alert = new Alert(Alert.AlertType.INFORMATION);
        alert.setTitle("Login");
        alert.setContentText("Success");
        alert.setHeaderText("Login Success");
        alert.show();
    }else{
         Alert alert = new Alert(Alert.AlertType.ERROR);
         alert.setTitle("Login");
         alert.setContentText("Username or password is invalid");
         alert.setHeaderText("Login Failed");
         alert.show();
    }
  }
}

Cascading Style Sheet

.borderPane_Style {
-fx-background-color: linear-gradient(to right bottom, #002151, #00215c, #052066, #141d70, #241878);
}

.button {
-fx-background-color: white;
-fx-background-radius: 100;
-fx-text-fill: #002151;
-fx-border-width: 5;
-fx-border-color: white;
-fx-border-radius: 100;
-fx-font-weight: bold;
-fx-font-size: 20;

}

.button:hover {
-fx-background-color: transparent;
-fx-background-radius: 100;
-fx-text-fill: white;
-fx-border-width: 5;
-fx-border-color: white;
-fx-border-radius: 100;
-fx-font-weight: bold;
-fx-cursor: hand;
}

.button:pressed{
-fx-scale-z: 0.9;
-fx-scale-y: 0.9;
-fx-scale-x: 0.9;
}

YouTube Video