无需HTML在JavaFX中实现炫酷按钮的问题求助

核心原因 #

原CSS是为Web HTML按钮编写的，和JavaFX的CSS规范不兼容，和附带的HTML文件完全无关——那个HTML只是Web端的按钮使用示例，JavaFX开发不需要处理或使用它。

JavaFX CSS不支持Web CSS的部分特性，比如:before/:after伪元素、filter: blur属性，且属性命名规则不同（Web的border对应JavaFX的-fx-border-width等），这才是样式失效的根本原因。

适配JavaFX的修改方案 #

1. 调整后的CSS代码 #

删除原CSS中html, body的无用样式，替换为JavaFX支持的属性和实现方式：

/* 容器样式：模拟原CSS的:before发光层 */
.glow-container {
    -fx-padding: 5px; /* 预留发光空间 */
    -fx-background-radius: 12px; /* 比按钮大2px，对应原效果的偏移 */
}

/* 按钮基础样式 */
.glow-button {
    -fx-pref-width: 220px;
    -fx-pref-height: 50px;
    -fx-border-width: 0;
    -fx-border-color: transparent;
    -fx-background-radius: 10px;
    -fx-background-color: #111;
    -fx-text-fill: #fff;
    -fx-cursor: hand;
    /* 移除焦点边框 */
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;
}

/* hover时触发发光动画 */
.glow-container:hover {
    -fx-background-color: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    -fx-background-size: 400% 100%;
    -fx-effect: blur(5px);
    -fx-animation: glowing 20s linear infinite;
}

/* 发光渐变动画 */
@keyframes glowing {
    0% { -fx-background-position: 0% 50%; }
    50% { -fx-background-position: 100% 50%; }
    100% { -fx-background-position: 0% 50%; }
}

/* 点击按钮的样式变化 */
.glow-button:pressed {
    -fx-text-fill: #000;
    -fx-background-color: transparent;
}

2. FXML中的使用方式 #

因为JavaFX按钮不支持伪元素，需要用StackPane包裹按钮来模拟外层发光效果：

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>

<StackPane styleClass="glow-container" xmlns="http://javafx.com/javafx/17" xmlns:fx="http://javafx.com/fxml/1">
    <Button styleClass="glow-button" text="HOVER ME, THEN CLICK ME!"/>
</StackPane>

3. 在Scene Builder中生效的步骤 #

• 将修改后的CSS文件关联到FXML（Scene Builder右侧→StyleSheets→添加CSS文件）
• 给外层StackPane添加glow-container样式类，给按钮添加glow-button样式类
• 预览或运行项目即可看到发光效果

内容的提问来源于stack exchange，提问作者Alexander Jonsson