在构建 WordPress 网站时，按钮是最常见的交互元素之一。为了提升设计一致性与维护效率，使用 GenerateBlocks Pro 的 Global Styles（全局样式）功能可以帮助你创建一组可重复使用、可统一管理的按钮样式。
本文将带你一步步完成按钮样式的创建、优化与复用过程。
一、为什么使用 Global Styles？
传统按钮样式设置需要在每个页面或模块中手动调整，而 GenerateBlocks Pro 提供了全局样式系统，让你一次设置，多处复用。无论你需要创建主按钮、次按钮，还是链接按钮，全部都可以集中管理，快速维护。
二、创建第一个按钮样式（Primary）
步骤 1：添加按钮元素
编辑任意页面或文章
添加 GenerateBlocks 的按钮块（点击带蓝色图标的按钮元素）
设置按钮的 display 属性为 inline-flex，避免编辑器中显示错乱
步骤 2：创建全局样式
点击“创建样式”，建议使用带前缀的类名，如 btn-primary，减少与其他插件冲突的概率选择“从空白开始”
步骤 3：设置样式属性
背景色：选择主题中的深色品牌色边框：1px 宽度，颜色与背景一致圆角：100px，呈现圆角药丸按钮外观内边距：上下 1rem，左右 2rem
文字样式：颜色：白色
大小：1.125rem
字重：500
大写字母（Text Transform: Uppercase）
步骤 4：设置悬停效果
点击“Hover”标签进入悬停状态设置
背景色：改为更浅的同色系边框颜色：同步更新为浅色，避免视觉冲突添加阴影：使用 box-shadow 生成器生成 CSS 阴影代码并粘贴添加过渡动画：为按钮设置 0.2 秒的 transition 效果，让悬停更自然
三、创建复用的 Box Shadow 工具类
为了方便调用，阴影可以作为独立样式类设置
新建全局样式名为 shadow-primary添加效果 → Box Shadow → 粘贴生成器代码只要给按钮加上该类名，就能使用相同阴影效果
四、按钮样式变体示例
1. 次按钮样式（Secondary）
背景设为透明文字颜色为品牌主色悬停时填充背景色，文字变为白色可继承 btn-primary 的边框、圆角、内边距等视觉统一性
2. 链接按钮样式（Link）
边框设为透明悬停时仅显示边框色，无背景变化背景色：改为透明，边框颜色改为深色。悬停时，边框效果显示不悬停时效果
五、样式优先级与顺序说明
在 GenerateBlocks → Global Styles 中：
可查看每个样式类的具体属性和状态（默认、悬停）类似 CSS，后添加的类将覆盖前面类的样式可通过拖动调整类的顺序，控制样式生效的优先级
六、统一维护与管理优势
一旦按钮类创建完成，在站点任何位置都能直接使用这些样式类。修改一次，全站按钮同步更新，有助于提升效率与一致性。
例如：
修改 btn-primary 的内边距或圆角，所有引用它的按钮会自动同步调整
更新 hover 效果后，不需要重复设置
结语
GenerateBlocks Pro 的 Global Style 系统是构建模块化按钮设计的实用工具。将主按钮、阴影、边框、颜色等属性进行拆分与复用，可以节省时间，同时减少重复操作。
如果你正在使用 GenerateBlocks 构建 WordPress 网站，建议把全局按钮样式作为标准开发流程的一部分，帮助你快速构建统一风格的网站组件。
欢迎关注光子波动网，获取更多 WordPress 高效建站教程与设计实践内容。