Less CSS cheating for hovering and multiple fonts on a button with round edges

Question

Purpose: Create a round button with several text fonts.

Example: See RoundButtonWithMultipleFonts.java and RoundButtonWithMultipleFonts.css

RoundButtonWithMultipleFonts.java:

import javafx.application.Application; import javafx.event.EventHandler; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.control.Control; import javafx.scene.control.Label; import javafx.scene.input.MouseEvent; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class RoundButtonWithMultipleFonts extends Application { public static void main(String... args) { launch(args); } @Override public void start(Stage stage) throws Exception { stage.setTitle("Button with multiple fonts?"); stage.setScene(new Scene(getRoot(), 400, 400)); stage.getScene().getStylesheets().addAll(getClass().getResource("RoundButtonWithMultipleFonts.css").toExternalForm()); stage.sizeToScene(); stage.show(); } private Parent getRoot() { Button button = new Button(""); // The labels should be the buttons text button.setOnMouseClicked(new EventHandler<MouseEvent>() { @Override public void handle(MouseEvent mouseEvent) { System.out.println("Button clicked"); } }); Label header = new Label("A Prideful Header"); // Label for big font on button header.getStyleClass().addAll("header"); Label footer = new Label("a humble footer"); // Label for small font on button footer.getStyleClass().addAll("footer"); // Since the labels are on top of the button, pass any events they capture to the button configurePassThroughEvents(button, header, footer); StackPane stack = new StackPane(); stack.getChildren().addAll(button, header, footer); return stack; } private void configurePassThroughEvents(Control targetControl, Control... sourceControls) { MouseEventPassThrough passThroughEvent = new MouseEventPassThrough(targetControl); for(Control sourceControl : sourceControls) { sourceControl.setOnMouseClicked(passThroughEvent); sourceControl.setOnMouseDragged(passThroughEvent); sourceControl.setOnMouseDragEntered(passThroughEvent); sourceControl.setOnMouseDragExited(passThroughEvent); sourceControl.setOnMouseDragOver(passThroughEvent); sourceControl.setOnMouseDragReleased(passThroughEvent); sourceControl.setOnMouseEntered(passThroughEvent); sourceControl.setOnMouseExited(passThroughEvent); sourceControl.setOnMouseMoved(passThroughEvent); sourceControl.setOnMousePressed(passThroughEvent); sourceControl.setOnMouseReleased(passThroughEvent); } } private static class MouseEventPassThrough implements EventHandler<MouseEvent> { private final Control targetControl; private MouseEventPassThrough(Control targetControl) { this.targetControl = targetControl; } @Override public void handle(MouseEvent mouseEvent) { targetControl.fireEvent(mouseEvent); } } } 

RoundButtonWithMultipleFonts.css:

 .button { -fx-border-width: 1px; -fx-border-color: #000000; -fx-border-radius: 45; -fx-background-color: linear-gradient(#ffffff 0%, #cccccc 100%); -fx-background-radius: 45; -fx-padding: 50 100; } .button:hover { -fx-background-color: linear-gradient(#ffffff 0%, coral 100%); } .label { -fx-padding: 10; -fx-background-color: cornflowerblue; } .header { -fx-font-size: 110%; -fx-font-weight: bold; -fx-translate-y: -20; } .footer { -fx-font-size: 80%; -fx-translate-y: 20; } 

Execution Results:

Problem:

• When the mouse scrolls over one of the corners of the buttons, the button goes into hovering, but the mouse is still outside the visible borders of the button, indicated by the button frame and background. (See Image.)

• This example uses a stack panel, multiple labels, an event mechanism, and CSS crawl to create a button that contains text with multiple fonts.

Questions:

• How can I indicate that a button should only go into hibernation if the mouse encounters the visual border of the buttons, as indicated in css with borders or background properties?

• Is there an easier way to specify multiple fonts (with a common layout of text) for a button than what was done in this example? Ideally, I would just like to use a button with a nested Node as text. This would allow me to put everything that I would like into the text area of ​​the buttons, without the need for an event mechanism, StackPane and CSS snag.

Answer 1

You can use setGraphic(Node node); Button class method for setting your custom label on a button. Here is an example

 Label header = new Label("A Prideful Header"); header.getStyleClass().addAll("header"); Label footer = new Label("a humble footer"); footer.getStyleClass().addAll("footer"); VBox box = new VBox(); box.getChildren().addAll(header,footer); Button button = new Button(); button.setGraphic(box);