javafx - Form Element _001

Practiced  (http://codepen.io/kaezarrex/pen/EmzVLM by David)

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.ParallelTransition;
import javafx.animation.ScaleTransition;
import javafx.animation.Timeline;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ChangeListener;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyCodeCombination;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;
import javafx.util.Duration;

public class Main extends Application {
 public static void main(String[] args) {
  launch(args);
 }

 final Font DEFAULT_FONT = Font.font("Candara", 15);

 @Override
 public void start(Stage stage) throws Exception {
  VBox root = new VBox(20, new InputField("First Name"), new InputField("Last Name"), new CustomButton("Submit"));
  root.setAlignment(Pos.CENTER);
  root.setStyle("-fx-background-color:white");

  Scene scene = new Scene(root, 300, 300, Color.WHITE);
  stage.setScene(scene);
  stage.show();
  scene.getAccelerators().put(new KeyCodeCombination(KeyCode.ESCAPE), () -> System.exit(0));
  scene.getStylesheets().add("style.css");
 }

 class CustomButton extends HBox {
  Button btn;
  public CustomButton(String name) {
   setAlignment(Pos.CENTER);

   btn = new Button(name);
   getChildren().add(btn);

   btn.getStyleClass().clear();
   btn.getStyleClass().add("button-2");
   btn.setFont(DEFAULT_FONT);
   animations();
  }
  private void animations() {
   SimpleIntegerProperty lineLength = new SimpleIntegerProperty(0);
   lineLength.addListener((p, o, n) -> {
    String color = "linear-gradient(to right, red "+n+"%, gray "+(n.doubleValue()+1)+"%, gray 100%)";
    btn.setStyle("-fx-border-color:"+color);
   });

   Timeline tl = new Timeline(
     new KeyFrame(Duration.ZERO, new KeyValue(lineLength, 0, Interpolator.EASE_OUT)),
     new KeyFrame(Duration.millis(600), new KeyValue(lineLength, 100, Interpolator.EASE_OUT))
     );
   
   btn.hoverProperty().addListener((p, o, n) -> {
    if(n)
     tl.playFromStart();
    else {
     tl.stop();
     btn.setStyle("-fx-border-color:gray");
    }
   });
  }
 }

 class InputField extends Group {
  final TextField field;
  final Label label;

  public InputField(String name) {
   field = new TextField();
   label = new Label(name);

   field.setFont(DEFAULT_FONT);
   label.setFont(DEFAULT_FONT);

   label.getStyleClass().clear();
   field.getStyleClass().clear();

   getStyleClass().add("input-field");
   field.getStyleClass().add("text-field-2");
   label.getStyleClass().add("label-2");

   getChildren().addAll(label, field);
   animations();
  }

  private void animations() {
   TranslateTransition translateField = new TranslateTransition(Duration.millis(300), field);
   TranslateTransition translateLabel = new TranslateTransition(Duration.millis(300), label);
   ScaleTransition scaleLabel = new ScaleTransition(Duration.millis(300), label);

   SimpleIntegerProperty lineLength = new SimpleIntegerProperty(0);
   lineLength.addListener((p, o, n) -> {
    String color = "linear-gradient(to right, red "+n+"%, gray "+(n.doubleValue()+1)+"%, gray 100%)";
    label.setStyle("-fx-text-fill:"+color);
    field.setStyle("-fx-border-color:"+color);
   });

   Timeline tl = new Timeline(
     new KeyFrame(Duration.ZERO, new KeyValue(lineLength, 0, Interpolator.EASE_OUT)),
     new KeyFrame(Duration.millis(600), new KeyValue(lineLength, 100, Interpolator.EASE_OUT))
     );

   ParallelTransition pt = new ParallelTransition(translateField, scaleLabel, translateLabel);

   Runnable focused = () -> {
    pt.pause();
    translateField.setToY(17);
    scaleLabel.setToY(0.6);
    scaleLabel.setToX(0.6);
    translateLabel.setToX(-10);
    pt.playFromStart();
    tl.playFromStart();
    pt.setOnFinished(e -> {});
   };

   Runnable focuslost = () ->{
    if(field.isFocused())
     return;

    pt.pause();
    translateField.setToY(0);
    scaleLabel.setToY(1);
    scaleLabel.setToX(1);
    translateLabel.setToX(0);
    pt.playFromStart();
    tl.stop();
    pt.setOnFinished(e -> {
     label.setStyle("-fx-text-fill:gray");
     field.setStyle("-fx-border-color:gray");
    });
   };
   
   ChangeListener<Boolean> cl =  (p, o, n) -> {
    if(n)
     focused.run();
    else
     focuslost.run();
   };
    
   hoverProperty().addListener(cl);
   field.focusedProperty().addListener(cl);
  }
 }
}

.input-field .text-field-2 {
 -fx-border-width:0 0 2 0;
 -fx-border-color:gray;
 -fx-padding:2;
}

.button-2 {
 -fx-padding: 0.3em 1.4em 0.3em 1.4em;
 -fx-border-width:2;
 -fx-border-color:gray; 
}