带有 Divi 新背景选项的样式按钮（包括 6 种设计）

如果您还没有利用 Divi 的新背景选项界面，那么您就错过了。 背景设计的可能性令人震惊。 但是为我们的按钮提供同样强大的设计选项不是很棒吗？ 如果答案是肯定的，那么我想你会喜欢这篇文章的。

今天我将向您展示如何将同样强大的背景设计功能引入样式按钮。 这个设计技巧将按钮模块后面的行和列背景分层，为您提供 3 层设计功能。 有了这种力量，事情就会变得危险起来。 最好保持冷静，一开始慢慢来

我们走吧。

抢先看

以下是本文中介绍的按钮设计示例。

带有 Divi 新背景选项的样式按钮（包括 6 种设计）

订阅我们的 YouTube 频道

设置

使用 Visual Building，添加一个带有一列行的常规部分。

接下来向该行添加一个按钮模块。

然后更新按钮模块设置如下：

内容选项

按钮文字：[输入文字]
按钮网址：[输入网址]

设计选项

按钮对齐：居中
文字颜色：浅
为按钮使用自定义样式：是
按钮文字大小：48px

高级选项

我们需要 100% 的宽度来填充列的宽度。 为此，请在 Main Element 框中输入以下自定义 CSS：

Width: 100%;

保存设置

您现在看不到页面上的任何内容，因为您的按钮边框和文本是白色的。 我们将使用更高级的背景选项自定义按钮后面的行/列的背景颜色，而不是使用按钮模块设置来设置按钮的背景颜色。 一旦我们开始对按钮进行更具体的设计，我们将重新审视按钮模块设置。 但是现在，让我们完成行的设置。

转到新按钮所在的行设置并更新以下内容：

内容选项

选择第 1 列背景渐变选项卡，然后单击带有白色加号的灰色圆形按钮。

现在你应该看到默认的渐变颜色显示在你的白色按钮后面。

该列现在非常适合我们的按钮后面，但我们需要减小按钮的宽度。 为此，我们将使用行大小设置。 通过为我们的行设置自定义宽度，我们还设置了按钮的宽度。

设计选项

在设计选项下，我们将通过调整以下内容来调整行的大小以适合我们的新按钮：

使用自定义宽度：是
自定义宽度：500px（这将按钮的最大宽度设置为 500px）
自定义填充：顶部 0px、右侧 0px、底部 0px、左侧 0px

高级选项

我们需要将行和列的边框半径与我们为按钮设置的匹配，以便它们都匹配。为此，在主元素框中输入以下自定义 CSS：

border-radius: 10px;

在 Column Main Element框中输入相同的 CSS：

border-radius: 10px;

保存设置

现在 Row 设置已更新为具有自定义宽度和填充，完成了两件事。 首先，我们已经成功地为我们的按钮设置了自定义宽度。 其次，我们现在有另一层背景选项可以用来设计按钮的样式。

总共有 3 个背景层（按钮、列、行），我们可以稍后用于样式设置。

这是当前如何构建按钮的说明。

很酷吧？

这就是基本设置。 现在是时候为您的按钮创建令人敬畏的设计的有趣部分了。

创建令人敬畏的按钮设计

#1 视频背景按钮

要创建此按钮，您将使用所有 3 个图层，视频的行背景、渐变的列背景以及淡蓝色叠加的按钮背景。

对于行设置更新以下内容选项：

背景视频：【上传视频】
第 1 列背景渐变颜色：rgba(12,113,195,0.41), rgba(131,0,233,0.18)

保存设置

对于Button Module Settings ，更新以下内容：

内容选项

按钮文字：“检查一下”

设计选项

按钮背景颜色：rgba(12,113,195,0.25)
按钮边框颜色：#0c71c3

保存设置

现在我们剩下的唯一问题是视频背景的边框半径。 我们必须添加一些自定义 CSS 来为视频提供与按钮匹配的边框半径。 仅视频背景按钮需要此额外代码。

要添加自定义 CSS，请从 Visual Builder 转到页面设置，然后单击高级选项卡。 然后使用以下 CSS 更新自定义 CSS 输入框：

.et_pb_section_video_bg {

border-radius: 10px;

}

保存设置

提示：另一个很酷的设计选项是在悬停时显示视频。 只需为您的按钮模块提供纯色背景色并在悬停时将其更改为透明即可。

就是这样！ 现在您有一个带有视频背景的按钮。

#2 方格按钮

方格按钮需要使用两层（行和列）背景颜色渐变。

要创建此按钮，您将使用 2 个图层，第一层渐变的行背景和最后一层渐变颜色的列背景。

对于行设置更新以下内容选项：

背景渐变色：#8300e9、#0c71c3
梯度方向：270度
起始位置：50%
结束位置：0%
Column1 背景渐变色：rgba(224,11,0,0.39), rgba(255,255,255,0)
梯度方向：180度
起始位置：50%
结束位置：0%

保存设置

现在转到按钮模块设置并更新以下内容

内容选项

按钮文字：“订阅”

设计选项

按钮边框宽度：0px
按钮字母间距：10px
按钮字体：默认、粗体 (B)、斜体 (I)
按钮悬停字母间距：10px

就是这样。 这是最终结果。

现在您知道如何为按钮添加方格效果了。

#3 径向渐变按钮

要创建此按钮，您将使用 2 层（行和列）背景颜色渐变。

对于行设置更新以下内容选项：

背景渐变色：#8300e9、#0c71c3
渐变类型：径向
径向：中心
起始位置：50%
结束位置：100%
Column1 背景渐变色：rgba(224,11,0,0.39), rgba(255,255,255,0)
渐变类型：径向
径向：中心
起始位置：50%
结束位置：100%

保存设置

现在转到按钮模块设置并更新以下内容：

内容选项

按钮文字：“联系我”

设计选项

按钮边框宽度：0px
按钮字体：Crafty Girls

按钮图标：[选择心形图标]
仅在悬停按钮时显示图标：否

高级选项

最后，让我们为按钮添加一个幻灯片阴影。 除了前面的代码，在Main Element框中输入以下自定义 CSS：

box-shadow: 0px 5px 10px 3px #ccc;

就是这样！ 这是你的最终结果：

#4 靶心按钮

要创建此按钮，您将使用 2 层（行和列）背景颜色渐变。 另外，我们将在按钮模块中添加一些自定义 css 以创建底部边框弹出效果。

对于行设置更新以下内容选项：

背景渐变色：#023500、#008c02
渐变类型：径向
径向：中心
起始位置：19%
结束位置：0%
Column1 背景渐变色：rgba(0,206,72,0.43), rgba(255,255,255,0)
渐变类型：径向
径向：中心
起始位置：32%
结束位置：0%

现在转到按钮模块设置并更新以下内容：

内容选项

按钮文字：“购买”

设计选项

按钮文字大小：65px
按钮边框宽度：0px
按钮字体：Roboto、粗体（B）、大写（TT）

高级选项

现在进行最后的接触。 将以下自定义 CSS 添加到Main Element输入框中的现有代码中：

box-shadow: 0px 5px 0px 0px #01771f;

#5 图像按钮

要创建此按钮，您将使用所有 3 个图层，背景图像的行，渐变背景的列和半透明蓝色叠加的按钮背景。

对于行设置更新以下内容选项：

在背景图像选项卡下

背景图片：【上传图片】
背景图片尺寸：封面
背景图片位置：中心
背景图像重复：不重复
背景图像混合：相乘

在背景渐变选项卡下

背景渐变颜色：rgba(12,113,195,0.33), #edf000
渐变类型：线性
梯度方向：63deg
起始位置：50%
结束位置：100%

现在向下滚动到第 1 列背景选项并选择渐变选项卡。

第 1 列背景渐变颜色：rgba(236,239,31,0.66), rgba(0,0,0,0.49)
列渐变类型：线性
柱梯度方向：139deg
列起始位置：12%
列结束位置：0%

保存设置

这照顾了我们的第二级背景设计。 还剩一个。

转到按钮模块设置并更新以下内容：

内容选项

按钮文字：“获取门票”

设计选项

按钮背景颜色：rgba(12,113,195,0.16)
按钮边框颜色：#efef4f
按钮字体：Lato
按钮图标：[选择门票图标]
仅在悬停按钮时显示图标：否

按钮悬停文本颜色：#023b7c
按钮悬停背景颜色：#023b7c

就是这样！。 检查您的图像按钮。

#6 纵向按钮

为了构建最后一个按钮，我们将只使用一层背景设计。 我们将使用背景图像和背景颜色的图像混合来创建独特的外观。

对于Row Settings ，向下滚动到Column 1 Background Options并更新以下内容：

栏目背景图片：【上传人像图片】
列背景图像大小：适合（这将确保肖像始终适合按钮）
列背景图像位置：左中（这会将您的肖像与按钮的左侧对齐）
列背景图像重复：不重复
列背景图像混合：亮度（这可以很好地将橙色与肖像混合在一起）

如果设置了当前渐变颜色，请确保删除它们。 如果没有，您希望能够混合橙色背景。 只需单击渐变选项卡并将鼠标悬停在颜色选择器框上，然后单击右上角弹出的垃圾桶图标。

现在您可以在按钮上看到橙色混合。

保存设置

现在转到按钮模块设置并更新以下内容：

内容选项

按钮文字：“让我们谈谈”

设计选项

按钮对齐：右
按钮边框颜色：#ff7b23
按钮字母间距：3px
按钮字体：Happy Monkey
按钮图标 [添加聊天图标]
仅在悬停按钮时显示图标：否
按钮悬停字母间距：3px

全部完成！ 我喜欢这种博客联系按钮的设计。 我认为它增加了一个很好的个人风格。

在不同的列结构上设计按钮

到目前为止，我们一直使用单列行作为按钮的背景。 这允许我们进行 3 层背景设计。 但是，如果您想在不同的列结构上包含按钮，则​​可以。 您将丢失作为背景层的行。

例如，假设您要添加一个 1/2 1/2 列的行，左侧有一个按钮，右侧有一些文本。 这是你要做的。

从新的常规部分开始，然后选择1/2 1/2 列的行结构。 然后在左列添加一个按钮模块。

在Button Module settings 中，确保在 Advanced 选项卡下的 Main Element 输入框中插入以下 CSS：

Width: 100%;

您可以稍后自定义按钮模块的其余部分。

接下来，转到行设置并向下滚动到第 1 列背景选项并根据需要更新背景设置。

然后转到“设计”选项卡并更新以下内容：

第 1 列自定义填充：顶部 0px、右侧 0px、底部 0px、左侧 0px

保存设置

现在您在左列上有一个按钮，可以使用第 1 列的背景选项进行设计。 返回并根据自己的喜好更新按钮样式后，将文本添加到右列即可完成！

有反应吗？

是的。 因为按钮是在 Divi 的列结构中构建的，所以按钮在所有设备上都会很好地响应。 您可能需要重新访问按钮模块设置以调整某些按钮元素如何适应不同设备。

跨浏览器支持

目前，Internet Explorer 或 Edge 不支持 background-blend-mode CSS 属性，并且 Safari 的混合选项有限。 然而，在大多数情况下，根据我的经验，回退并不重要。

以下是 IE 上的按钮外观：

如果您致力于 IE，我建议您测试它们以找到一种在 IE 和其他浏览器上看起来都很棒的快乐媒介。

最后的想法

我不得不承认，本教程对我个人来说非常具有开创性。 过去，如果我想创造性地设计按钮样式，我必须向我的子主题添加一堆类和额外的 CSS。 但是现在我可以使用 Divi 的背景选项，我的生活变得容易多了。 我希望您可以使用这个设计技巧将您的按钮提升到一个新的水平。

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

干杯