• Quick Summary:

I have a cool button on CodePen that rotates and grows when hovered over using HTML/CSS. I want to incorporate this button into my JavaFX GUI, built with SceneBuilder and FXML files. The GUI currently features buttons numbered 1-4, and I would like them to be styled similarly to the CodePen button. However, I'm unsure about how to merge the HTML/CSS code with my JavaFX setup.

• Detailed Description:

My JavaFX GUI is comprised of three main files: Main.java, sample.fxml, and Controller.java. I've been working with SceneBuilder while crafting the GUI showcased below. SceneBuilder has automatically generated code in the sample.fxml file. On the other hand, the CodePen button employs pure CSS and HTML. Integrating these two sets of code seems challenging since I am not well-versed in how it all fits together within JavaFX.

I've tried referring to JavaFX documentation for guidance, which provided me with some code snippets such as:

 Rectangle rect = new Rectangle (100, 40, 100, 100);
            rect.setArcHeight(100);
            rect.setArcWidth(100);
            rect.setFill(Color.BLUE);

            RotateTransition rt = new RotateTransition(Duration.millis(400), rect);
            rt.setByAngle(360);
            rt.setAutoReverse(true);

While experimenting with this code in my Main.java file, I modified it to create a circular effect. Nonetheless, the snippet doesn't seem to address the use of FXML. In terms of CSS styling, I came across various approaches like:

-fx-background-color: #7cafc2;
-fx-text-fill: #FFFFFF;
-fx-background-radius: 4;

Despite trying out different styles, I couldn't achieve transformations like rotation or scaling. How can I smoothly blend the CSS and HTML elements into my FXML layout to maintain coherence with what's created in SceneBuilder? My goal is to replace the existing buttons on my GUI with four instances of the fascinating CodePen buttons.

Your insights and assistance are greatly appreciated!

Current GUI Layout:

https://i.sstatic.net/GZbEf.png

Main.java File:

import ...

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

    @Override
    public void start(Stage primaryStage) throws Exception{

        Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
        primaryStage.setTitle("Form Demo");
        primaryStage.setScene(new Scene(root, 420, 475));
        primaryStage.show();
    }

}

Sample.fxml File:

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

<VBox xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">

<BorderPane VBox.vgrow="ALWAYS" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
   <top>
      <VBox>
         <children>
            <HBox spacing="10.0" VBox.vgrow="ALWAYS">
               <children>
                     <Label fx:id="fileLabel1" prefHeight="33.0" prefWidth="100.0" text="NAS Form:" textOverrun="WORD_ELLIPSIS">
                        <font>
                           <Font name="System Bold" size="17.0" />
                        </font>
                        <padding>
                           <Insets top="7.0" />
                        </padding>
                     </Label>
                     <Label fx:id="fileLabel" alignment="CENTER" contentDisplay="CENTER" prefHeight="33.0" prefWidth="209.0" text="No file selected" HBox.hgrow="ALWAYS">
                        <padding>
                           <Insets top="7.0" />
                        </padding>
                        <font>
                           <Font size="17.0" />
                        </font></Label>
                     <Region nodeOrientation="RIGHT_TO_LEFT" prefHeight="31.0" prefWidth="10.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#Browse" prefHeight="31.0" prefWidth="90.0" text="Browse " HBox.hgrow="ALWAYS" />
               </children>
               <VBox.margin>
                  <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
               </VBox.margin>
            </HBox>
               <Separator prefWidth="200.0" />
            <Region prefHeight="30.0" prefWidth="200.0" />
            <HBox VBox.vgrow="ALWAYS">
               <children>
                  <Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#FieldData" text="Field Data" HBox.hgrow="ALWAYS" />
                     <Region prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#CompData" text="Comp Data" HBox.hgrow="ALWAYS" />
                     <Region prefHeight="200.0" prefWidth="100.0" />
               </children>
            </HBox>
            <HBox VBox.vgrow="ALWAYS">
               <children>
                     <Region prefHeight="200.0" prefWidth="19.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#Photos" text="Photos" HBox.hgrow="ALWAYS" />
                  <Region prefHeight="200.0" prefWidth="35.0" HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onAction="#Sketch" text="Sketch" HBox.hgrow="ALWAYS">
                     <HBox.margin>
                        <Insets />
                     </HBox.margin>
                  </Button>
                     <Region prefHeight="200.0" prefWidth="125.0" />
               </children>
            </HBox>
         </children>
      </VBox>
   </top>
</BorderPane>
</VBox>