在 Divi 中创建流体按钮设计的完整指南

流畅按钮设计是设计一个可随浏览器窗口（或视口）大小灵活缩放的按钮的过程。 它涉及将流体网页设计的实践应用于按钮的所有设计属性。 这使得按钮的设计在所有设备上都具有可预测性和一致性。 而且，它是传统响应式设计技术的一种令人耳目一新的替代方案，传统响应式设计技术涉及在某些断点处对设计进行大量调整。

在本教程中，我们将向您展示在 Divi 中创建流体按钮设计的过程。 以下是我们将介绍的内容：

• Divi 按钮的剖析
• 如何在 Divi 中制作流体按钮
• 了解 em 长度单位
• 为按钮使用流体（或缩放器）字体大小
• Fluid Divi 按钮的剖析
• 在 Divi 中创建流体按钮设计（5 个示例设计）
• 使用 Clamp() 设置字体大小的流体按钮

由于流体按钮设计依赖于流体排版的实现，因此查看我们关于 Divi 中流体排版的完整指南可能会有所帮助。

让我们开始吧！

抢先看

这是我们将在本教程中构建的设计的快速浏览。

这是一个演示这种流畅按钮设计概念的代码笔。

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

要将部分布局导入您的 Divi 库，请导航到 Divi 库。

单击导入按钮。

在可移植性弹出窗口中，选择导入选项卡并从您的计算机中选择下载文件。

然后点击导入按钮。

完成后，分区布局将在 Divi Builder 中可用。

让我们进入教程，好吗？

你需要什么开始

首先，您需要执行以下操作：

1. 如果您还没有安装并激活 Divi 主题。
2. 在WordPress中新建一个页面，在前端使用Divi Builder编辑页面（visual builder）。
3. 选择“从头开始构建”选项。

之后，您将有一个空白画布开始在 Divi 中进行设计。

Divi 按钮的剖析

默认情况下，Divi Button 将具有包含 px 和 em 长度单位的内置样式（见上图）。 使用 px 长度单位的属性包括：

• 字体大小：20px
• 圆角：3px
• 边框宽度：3px
• 图标字体大小：由字体大小继承（20px）

这些 px 值是绝对值，无论您更改字体大小或浏览器视口的大小，都将保持不变。

使用 em 长度单位的属性包括：

• 填充：顶部 0.3em，底部 0.3em，左侧 0.7em，右侧 2em
• 线高：1.7em
• 图标左边距：0.3em

这些 em 值与元素（或按钮）的字体大小相关，并且会在字体大小更改时更改（缩放）。

如何在 Divi 中制作流体按钮

了解 em 长度单位

在 Divi 中创建流体按钮的关键是了解 em 长度单位的工作原理。 em 长度单位是相对于元素的字体大小（无论它是什么）。 本质上，em 的值是元素字体大小的倍数。 例如，如果元素的字体大小为 20px，则 2em 与 2(20px) 相同。 这意味着每当元素的字体大小改变时，em 长度单位就会改变。 但是，px 长度单位不会改变。

继续我们的默认示例，按钮的默认右内边距是 2em（或 em 的 2 倍）。 因为按钮字体大小是 20px，所以右边的 padding 是 20px 的 2 倍（也就是 40px）。 顶部和底部填充为 0.3em。 所以顶部和底部的内边距是 6px（0.3 乘以 20px 等于 6px）。

请参阅下图以了解基于字体大小的 em 长度单位的实际值。

为按钮使用流体（或缩放器）字体大小

使用 em 长度单位设计流体按钮时，一切都取决于按钮字体大小的大小。 换句话说，字体大小将应用于使用按钮的 em 长度单位的所有属性的值。 所以，如果你想让按钮样式变得流畅，你必须给按钮一个流体（或缩放器）字体大小。 最常用的流体长度单位是相对于浏览器视口宽度的 vw 长度单位。 换句话说，vw 长度单位随着浏览器宽度的变化而变化。

要制作流畅的按钮，请将 20px 字体大小替换为 2.4vw 之类的大小。 因为这个值会随着浏览器的宽度而变化，所有使用 em 长度单位的按钮属性也会随着浏览器的宽度而缩放。

Fluid Divi 按钮的剖析

简而言之，构建流畅的 Divi Button 包括两个关键原则：

1. 使用流体长度单位 (vw) 作为字体大小
2. 对所有按钮样式属性使用 em 长度单位值

这意味着您可以将 em 长度单位用于边框宽度、边框半径甚至框阴影。

这是一个流体按钮的插图，其中包括所有样式属性的流体字体大小 (2.4vw) 和 em 长度单位。

使用 em 长度单位的每个属性的实际值将继承相对于浏览器视口宽度 (vw) 的流体字体大小值和比例。

在 Divi 中创建流体按钮设计

现在我们对如何创建流体按钮有了更好的了解。 让我们在 Divi 中创建一些流畅的按钮设计。

#1 基本示例

首先，让我们创建我们之前说明的基本示例。

在 Divi Builder 中，创建一个新的单列行。

在设计选项卡下，使用 vw 长度单位值更新按钮文本大小，使其随视口宽度缩放：

• 按钮文字大小：2.4vw（桌面和平板电脑），18.4px（手机）

然后使用相对于按钮文本大小的 em 长度单位值更新以下属性：

• 按钮边框宽度：0.15em
• 按钮边框半径：1.3em
• 按钮字母间距：0.05em
• 填充：顶部 0.3em，底部 0.3em，左侧 1em，右侧 2em
• 盒子阴影：见截图
• 框阴影垂直位置：0.15em

这是最终结果。

#2 带有圆角和方框阴影的流体按钮

首先，创建一个新按钮并将按钮文本更新为“开始使用”。

在设计选项卡下，更新以下内容：

• 为按钮使用自定义样式：是
• 按钮文字大小：2.4vw（桌面和平板电脑），18.4px（手机）
• 按钮文字颜色：#000000
• 按钮背景颜色：#ffffff（桌面），#d9f9e9（悬停）
• 按钮边框宽度：0.15em
• 按钮边框颜色：#d9f9e9
• 按钮边框半径：1.3em

• 按钮字母间距：0.05em
• 按钮字体：Jura
• 按钮字体粗细：半粗体
• 按钮图标：向右箭头
• 按钮图标颜色：#000000
• 仅在悬停按钮时显示图标：否

• 填充：顶部 0.2em，底部 0.2em，左侧 1em，右侧 2em
• 盒子阴影：见截图
• 框阴影垂直位置：0.3em
• 框阴影模糊强度：0.5em
• 箱体阴影扩散强度：-0.3em

这是结果。

#3 具有独特框阴影和图标放置的流体按钮

对于下一个流畅的按钮设计，我们将使用独特的框阴影和图标放置。

首先，复制前面的示例#2。 然后打开复制按钮的设置以更新设计。

在设计选项卡下，更新以下内容：

• 按钮边框半径：0px
• 按钮图标颜色：#ffffff
• 盒子阴影：见截图
• 框阴影水平位置：-1.75em
• 框阴影垂直位置：0px
• 阴影颜色：#000000

在 Advanced 选项卡下，将以下自定义 CSS 添加到 After 元素：

margin-right: .3em;
right: 0;

这是结果。

#4 带有三色背景渐变的流体按钮

对于下一个流畅的按钮设计，我们将通过将背景渐变与独特的框阴影样式相结合，为按钮创建独特的三色背景渐变。

要创建按钮，请复制之前设计的示例 #3 按钮。

然后打开按钮设置以更新样式。

在高级选项卡下，删除 After 元素内的自定义 CSS。

在设计选项卡下，更新以下内容：

• 按钮文字颜色：#ffffff
• 按钮背景渐变左侧颜色：#f475ee
• 按钮背景渐变右颜色：#9694fc
• 梯度方向：90度
• 结束位置：2.5em
• 按钮边框宽度：0px
• 盒子阴影：见截图
• 框阴影水平位置：-2.5em
• 框阴影垂直位置：0px
• 框阴影模糊强度：1.5em
• 箱体阴影扩散强度：-1em
• 阴影颜色：#85c6f2

这是结果。

#5 具有自定义流体宽度的流体按钮

对于下一个流体按钮设计，我们将向按钮添加自定义流体宽度。 这将允许我们创建更大的按钮，可以随着浏览器的宽度灵活地缩放。

要创建按钮，请复制之前设计的示例 #2 按钮。

在设计选项卡下，将按钮对齐更新为居中。

在高级选项卡下，将以下自定义 CSS 添加到主元素：

桌面

display:block;
width: 100%;
max-width: 15em;

这是结果。

最终结果

现在看看我们的 4 个流体按钮设计的最终结果。

使用 Clamp() 设置字体大小的流体按钮

如果您想更好地控制流体按钮的最小和最大大小，可以使用 CSS Clamp() 函数来设置最小字体大小、缩放字体大小和最大字体大小。

为此，您需要重置每个按钮的按钮文本大小，使其恢复为默认设置。

然后，在高级选项卡下，将以下 CSS 添加到每个按钮的主元素。

这将确保字体大小的最小大小为 20px，缩放器（或流体）大小为 4vw，最大大小为 40px。

使用clamp() 的主要好处是你可以阻止按钮缩放过大或过小，同时保持流畅的响应式设计。

Clamp() 的最终结果

再次最终结果

这是最终查看每个带有和不带有 clip() 作为字体大小的流体按钮集合。

使用 vw 长度字体大小（桌面和平板电脑）和 px 长度单位（手机）

使用clamp() 设置最小、缩放和最大字体大小

最后的想法

在 Divi 中创建流体按钮依赖于两个主要原则：（1）对按钮的字体大小使用流体长度单位（如 vw），以及（2）对按钮的所有样式属性使用 em 长度单位值。 一旦你理解了这一点，找到合适的流体字体大小（使用 vw、clamp() 等）并调整然后使用 em 的各种值来完成按钮设计的其余部分是很重要的。 这将确保在调整浏览器的视口宽度时按钮缩放完美流畅。

记住。 当它们的父容器也不是流体时，流体按钮实际上不起作用。 例如，如果您在 400 像素的行内有一个流体按钮，则该按钮将没有缩放空间并且设计将中断。 为行提供 80% 或 90vw 的宽度将更适合流体按钮设计。

我期待在评论中收到您的来信。

干杯!