使用 GenerateBlocks Pro 创建可复用按钮样式的完整指南

在构建 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 高效建站教程与设计实践内容。

最近更新

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息