如何使用 Divi 的图标模块设计图标按钮

图标按钮已成为网页设计世界必不可少的。 图标提供简洁的视觉号召性用语，非常适合移动设备，因为它们不占用大量空间。 它们还可以很好地用作用户无需文本即可直观识别的切换或弹出按钮。

在今天的教程中，我们将向您展示如何使用 Divi 设计图标按钮。 在 Divi 中创建图标按钮非常简单且有趣。 使用图标模块，我们可以从数百个图标中进行选择，并使用无数内置的 Divi Builder 设计选项来创建您能想到的几乎任何类型的图标按钮。 希望本文能帮助您开始为您的下一个项目构建一些令人惊叹的图标按钮。

让我们开始吧！

抢先看

下面是我们将在本教程中构建的图标按钮的快速浏览。

免费下载布局

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

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

单击导入按钮。

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

然后单击导入按钮。

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

让我们进入教程，好吗？

你需要什么开始

要开始，您需要执行以下操作：

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

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

使用 Divi 的图标模块设计图标按钮

第 1 部分：构建图标按钮

首先，让我们在默认的常规部分中添加一列行。

然后在列中添加一个新的图标模块。

图标、链接 URL 和背景颜色

在图标设置模式的内容选项卡下，更新以下内容：

• 图标：右箭头（见截图）
• 图标链接 URL：#（现在只是一个填充物）
• 背景颜色：#3e22ff

边界和边界半径

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

• 圆角：10px
• 边框宽度：2px
• 边框颜色：#7272ff

盒子阴影

• 盒子阴影：见截图
• 阴影颜色：rgba(62,34,255,0.48)

将可点击空间与图标按钮大小匹配

目前，图标模块将跨越父容器（或列）的整个宽度。 这意味着可点击的空间大于实际的图标按钮。 为了使可点击空间与图标按钮的大小相匹配，我们可以给模块一个与图标按钮宽度相同的最大宽度。 图标按钮宽度可以通过添加图标宽度、左右内边距、左右边框宽度来确定。 在此示例中，按钮的总宽度为 94 像素。

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

max-width: 94px

这是结果。

第 2 部分：构建方形图标按钮

要创建我们的方形图标按钮，请复制包含我们刚刚创建的第一个图标按钮的行。 这将在重复行中为我们提供一个重复按钮以供使用。

为图标提供相同的高度和宽度，同时保持居中

图标模块中可用的大量图标包括 Divi 图标和 Fontawesome 图标。 但是，并非所有图标都具有相同的高度和宽度。 这使得确定图标按钮的确切宽度和高度变得更加困难。 我们可以对填充进行调整以使尺寸恰到好处，但这有点麻烦，并且可能会限制图标的某些悬停选项。 例如，向图标模块添加填充将在图标周围创建空间。 因此，如果您创建一个悬停选项来更改悬停时的图标颜色，那么当悬停在图标周围的空间（或填充）上时，图标颜色不会改变。 只有将鼠标悬停在图标本身上时它才会改变。

为了创建一个完美的方形按钮，在悬停时使用图标，我们可以添加一些自定义 CSS 来设置图标的高度和宽度，以及使用 CSS Flex 属性使图标居中。

这是如何做到的。

首先，打开复制图标的设置。 然后使用图标选择器中的新图标更新图标。

取出图标模块的填充。 这将不是必需的，因为我们将为图标设置高度和宽度。

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

height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;

现在图标按钮将具有 90px 的相等高度和宽度，这将使其成为一个完美的正方形。 加上 flex 属性使图标在模块的中心对齐。 这使您可以轻松地更新图标模块中的图标大小。

为了完成这个按钮，让我们给它一个背景渐变和一个白色边框颜色，如下所示：

• 背景渐变左颜色：#3e22ff
• 背景渐变右颜色：#ff2000
• 边框颜色：#fff

这是最终结果。

构建圆形图标按钮

一旦图标按钮是一个完美的正方形，使其成为圆形就很简单。 但在我向您展示这个简单的技巧之前，让我们复制上一行来开始构建我们的圆形图标按钮。

现在打开我们新复制图标的设置，并在设计选项卡下，更新边框半径（或圆角），如下所示：

就像那样，我们有一个圆形图标按钮！

为了稍微改变设计，让我们给图标模块一个不同的图标和背景颜色，如下所示：

• 图标：见截图
• 背景颜色：#121212

这是结果。

构建图标按钮水平菜单

一种流行的趋势是使用图标来构建图标菜单，该菜单通常由并排放置的多个按钮组成。 为此，我们可以使用 flex 属性。 这是它是如何完成的。

首先，在页面中添加一个新的单列行。

打开行设置并将装订线宽度更新为 1。

接下来，打开行内列的设置，并将以下自定义 CSS 添加到列主元素：

display:flex;
align-items:center;

在列中添加一个新的图标模块。

在图标设置的内容选项卡下，选择一个图标并添加一个图标链接 URL。

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

• 图标颜色：#3e22ff
• 图标大小：40px
• 边距：左 10 像素，右 10 像素
• 边框宽度：2px
• 边框颜色：#3e22ff

注意：一旦我们稍后添加更多，边距将在相邻按钮之间创建空间。

在高级选项卡下，将以下自定义 CSS 添加到图标元素（就像我们之前为方形图标按钮所做的那样）：

 
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;

现在，每当我们添加新的图标按钮时，它们都会并排显示。 为了演示这一点，让我们将现有的图标按钮复制三次，以在水平菜单中创建总共四个图标按钮。

之后，我们可以根据需要返回并更新图标。

这是结果。

添加图标按钮悬停效果

如果不提及悬停效果，就很难谈论设计图标按钮。 它们太有趣了，不容忽视。 我不会对 Divi 的内置悬停选项提供的所有可能性感到厌烦，但我会提到一些让这些创意果汁流动起来。

悬停时更改背景颜色和图标颜色

更改按钮的颜色是一种流行且有效的悬停效果。 例如，当用户将鼠标悬停在按钮上时，我们可以同时更改背景颜色和图标颜色。

为此，请打开图标模块设置并激活背景颜色的悬停选项，并为悬停状态选择不同的颜色。 然后你可以对图标做同样的事情。 在此示例中，我们将背景颜色从白色更改为蓝色，并将图标从蓝色更改为白色。

更改悬停时的图标

您可能喜欢的另一种悬停效果是将图标完全更改为不同的图标。 为此，您可以在图标设置中选择图标时为悬停状态选择不同的图标。

悬停时缩放图标按钮

一种难以忽视的悬停效果是缩放悬停效果。 这会使图标按钮扩大或变大。 添加此类悬停效果的最佳方法是使用 Divi 的变换选项。 这将允许按钮在不影响其周围元素的情况下增长。

要为图标按钮添加比例悬停效果，请打开图标设置，然后在设计选项卡下找到转换选项。 激活悬停选项，然后将以下变换比例分配给悬停状态：

• 变换比例 Y：118%
• 变换比例 X：118%

当用户将鼠标悬停在图标按钮上时，这会将图标按钮的大小增加 18%。

悬停时旋转图标按钮

在悬停时旋转物体总是一种有趣的微交互。 要在悬停时旋转图标按钮，我们可以使用变换旋转选项。 但在此之前，让我们将按钮设为圆形，以便只有图标出现旋转。

要使图标变为圆形，假设按钮是正方形，只需将所有四个角的圆角设置更新为 50%。

然后更新变换选项以在悬停状态中包含以下变换旋转值：

• 变换旋转Z：180度

让我们来看看我们的 4 种悬停效果。

最后结果

让我们看看我们教程的最终结果。

这是我们的三个图标按钮（标准、方形和圆形）。

这是带有悬停效果的图标按钮水平菜单。

最后的想法

了解如何为网站设计图标按钮至关重要。 而且，正如我们在本教程中所见，使用 Divi 并不难。 Divi 的图标模块有许多内置选项，为创意图标按钮设计打开了大门。 希望本文中的技术将有助于为您自己的图标按钮设计解锁一些魔力。

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

干杯!