JavaFX Custom Shaped Buttons

JavaFX provides effective ways to customize the shape of most of the components. In this tutorial, we will learn how to set a custom shape for the JavaFX Button component.

Creating custom shaped buttons

We can make use of -fx-shape CSS property to set the button to any custom shape. Let’s see how we can make a heart shaped button using -fx-shape styling. We will create two buttons, one normal button without any special styling and one with heart-shape. The -fx-shape css property accepts SVG paths as shape. Thanks to the SVG support, we can actually make any shape by providing the corresponding svg parameters. You can learn more about SVG shapes from w3.org.

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class HeartShapedButtonTutorial extends Application {

  @Override
  public void start(Stage stage) {
    HBox contentContainer = new HBox(50d, createNormalButton(), createHeartShapedButton());
    contentContainer.setAlignment(Pos.CENTER);
    Scene scene = new Scene(contentContainer, 500, 500);
    stage.setTitle("JavaFX Button Tutorial");
    stage.setScene(scene);
    stage.show();
  }

  private Button createNormalButton() {
    Button button = new Button("Normal Button!");
    button.setPrefSize(200, 200);
    return button;
  }

  private Button createHeartShapedButton() {
    Button button = new Button("Custom Button!");
    button.setStyle(
        "-fx-shape: \"M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.26.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z\";"
    );
    button.setPrefSize(200, 200);
    return button;
  }

  public static void main(String[] args) {
    launch();
  }
}

This will create the following output. The normal JavaFX button is added as the first child to the HBox. The custom shaped button is added as the second child.

You can also make use of this styling on special buttons like JavaFX Material Design Button, JFXButton.

Full tutorial on JavaFX Custom Shaped Button

If you are interested in exploring this further, checkout my video tutorial on Genuine Coder YouTube channel.

Circular Button

We can make the button circular by applying the following CSS code.

.circlular-javafx-button{
    -fx-background-radius: 150;
    -fx-pref-width: 300;
    -fx-pref-height: 300;
    -fx-background-color: green;        
}

Triangle Shaped Button

We can make triangle buttons by applying the following CSS code.

.balloon{
    -fx-shape: "M150 0 L75 200 L225 200 Z";
    -fx-background-color: #4DD0E1;
}

Conclusion

JavaFX allows setting custom shapes for its GUI components via -fx-shape option. We have explored the option and created variety of different buttons with heart-shape, circle-shape and triangle shape. You can make the button any shape you want by giving proper SVG path. If you have enjoyed this article, you might also be interested in the following.

• JavaFX Splash Screen
• BubbleSort algorithm visualization
• JavaFX 3D Tutorial