按钮

很难想象一个没有按钮的网站，因为大多数网站的“行动号召”通常都有按钮。基于此，让我们讨论一下重要的按钮元素。

要添加这个元素，只需搜索“button”并将“button”拖到画布上。

按钮的设置

我们将一步一步地走过每一部分。

设置

的设置控件包括:

• 基本字体大小-按钮文本的字体大小。
• 宽度&高度-按钮的宽度和高度默认设置为自动。可以更改为任何所需的值。
• 最小宽度&高度-最小宽度和高度的按钮应该。如果你想让你的按钮总是50px宽，这很有用。
• 最大宽度&高度-任何时候按钮的最大宽度和高度。如果你想让你的按钮永远不超过特定的大小，这很有用。
• 背景-提供两个选项:基础和交互。基地是按钮除悬停时以外的任何时候的背景色。交互悬停时和与按钮交互时按钮的背景色。

链接

的链接控件包括:

• 预览-接受URL输入中提供的链接的值，这样您就可以确切地看到链接在按钮中的样子。
• 类型—链路类型。它可以是一个传统链接，一个邮件链接或一个电话号码链接。

传统的链接

使传统的链接模式的链接设置是通过单击锚链接图标。你会收到URL输入，你可以添加你想链接到的网站的URL。的预览input将显示如何将其添加到实际的HTML代码中。检查新标签页复选框，如果您想在新的浏览器选项卡上打开该链接。检查nofollow复选框，如果您不想让搜索引擎嗅出链接。的nofollow通常在我们链接到外部网站时使用。

Mailto链接

使Mailto链接模式的链接设置是通过单击信封图标。将电子邮件地址添加到电子邮件并将邮件的主题输入主题输入。的预览input显示如何在HTML中添加链接。点击带有电子邮件设置的链接将打开访问者的电子邮件客户端软件，并填写收件人的电子邮件地址和电子邮件的主题。

电话联系

使电话联系模式的链接设置是通过单击电话图标。将电话号码添加到电话输入。的预览input显示如何在HTML中添加链接。点击带有电话设置的链接将打开用户设备的电话拨号屏幕，如果用户拥有具有该功能的设备。

• URL-链接的URL，按钮应该指向。
• 新标签页-你是否希望链接打开在一个新的选项卡。
• Nofollow-按钮是否应该是nofollow。设置nofollow意味着你链接到的网站不会被谷歌认为是由你支持的。如果链接到外部站点，通常建议检查这一点。

按钮设计设置

下面是按钮设计设置。

Flex布局

的Flex布局控件包括:

• 布局—选择“行”或“列”
• 改变布局
• 把孩子们
• 水平
• 垂直

的Flex布局控件允许您配置按钮元素的flexbox设置。如果你不熟悉flex，本指南会帮助你的。

保证金

的保证金布局控件包括:

• 联系方-链接边允许你链接每个选项在空白控制，所以当你改变一个值，所有的值都改变。或者您可以取消链接，并单独设置每个边距选项。
• 前—设置顶部空白。
• 正确的-设置右侧空白。
• Bttm—设置底部空白
• 左-设置左侧空白。

填充

的填充控件包括:

• 联系方-链接边允许你链接每个选项内的填充控件，所以当你改变一个值，所有的值都改变。或者，您可以取消链接边，并分别设置每个填充选项。
• 前—设置顶部填充。
• 正确的-设置正确的填充。
• Bttm-设置底部填充。
• 左-设置左填充。

边境

的边境控件包括:

• 联系方-允许您链接边界控制的所有方面或取消链接的方面，以单独控制每个边界方面。
• 风格-设置边框的样式，如虚线，虚线等。
• 宽度-默认设置边框宽度，单位为像素。或者单击PX将值更改为您想要使用的单位(EM, REM)。
• 颜色-设置边框的颜色。

边界半径

的边界半径控件包括:

• 联系方-连接边界的所有方面，以同时控制所有边界半径选项，而不是单独配置每个值。如果你把两边分开。您可以单独设置边界半径控件。
• 左上角-设置左上角的边界半径。
• 右上方-设置边框的右上方半径。
• Bttm正确-设置边框的右下方半径。
• Bttm左-设置边界的左下方半径。注意:除非你已经设置了边界控制，否则改变边界半径值不会有任何效果。

盒阴影

盒子阴影控件包括:

• x-设置X轴边框阴影的偏移量。
• y-设置Y轴边框阴影的偏移量。
• 模糊-设置框阴影的模糊。
• 传播&位置-设置框阴影的扩展和位置。
• 颜色-设置框阴影的颜色。

图形的设置

让我们看看一些按钮图形设置。

您会注意到您可以启用或禁用它。按钮和元素图形设置默认是禁用的。

这些是控制图形设置:

• 启用-前面已经讨论过了，你可以选择转向它在或从．当转在，所有其他选项/设置都变得可见，如图形图标，图形图像，图形布局和文本设置，这将在下面的子标题中讨论。
• 类型你可以任选一个图标(默认值)或图像．
• 图标&图像交互设置当你将鼠标悬停在元素上时图标的行为。

图形图标设置

如果你选择了图标作为图形设置下的类型图形图标将显示设置。它有以下控制:

• 字体大小&二次-这里有两个区域。一个是字体大小的大小，顾名思义，它允许您设置字体图标的。旁边的复选框是使用二次是不是图标。如果您希望当用户将鼠标悬停在图标上时图标有所不同，则需要选中复选框并选择不同的图标。

• 宽度&高度—设置图标的尺寸。
• 主要的&二次—如果没有使用次要图标，无论您是否悬停在鼠标上，它都将使用主要图标。如果使用Secondary，则Primary图标是在鼠标没有悬停在元素上时显示的图标，Secondary图标是在鼠标悬停在元素上时显示的图标。
• 颜色-有两个子选项:基地-当鼠标没有停留在图标上时，图标的颜色;交互-当鼠标悬停在元素上时图标的颜色。
• 背景-有两个子选项:基地-当鼠标没有悬停在图标上时，图标的背景颜色;交互当鼠标悬停在元素上时，图标的背景颜色。

现在，当你使用图标类型，还有其他选项可以让你进一步设计图标。它们如下:

• 图形图标边框
• 图形图标边界半径
• 图形图标框阴影
• 图形图标文字阴影

图形图像设置

如果您选择图像在图形设置…

．.．你将能够选择自己的图形，而不限于什么可用的图标。

当图像是选中的类型，您将能够看到以下设置:

下图形图像，您只有一个控件:

• 最大宽度-让你设置图像的最大宽度。

下主图形图像，你有以下控制:

• 视网膜&维-视网膜支持是开箱即用的。点击眼睛禁用视网膜支持。还支持设置图像的宽度和高度的选项。
• 源—要使用的映像。单击从WordPress媒体库中选择图片或上传新图片。

按钮文本设置

现在让我们看看按钮文本设置。

文本设置

文本设置控件包括:

• 启用-一个简单的开或关选项。如果你想要按钮有文本，请设置为On;如果你想要一个只有图标的按钮，请设置为Off。
• 文本溢出—设置“text overflow”为“enable”。
• 主要的文本-按钮内的正文默认为“了解更多”。
• 二级文本-在主文本下添加辅助文本。默认为空(无输出)。

主要文本格式

主文本设置控件包括:

• 字体-主按钮字体的字体选择器。默认是继承，或者你可以选择在字体管理器中设置的字体。
• 字体粗细-所选主字体的字体权重。可用的权重取决于所选的字体族。
• 字体大小
• 字符间距
• 行高

主要文本样式

主文本样式控件包括:

• 字体样式—普通或斜体
• 文本对齐-左，中，右，合理化。
• 文本装饰-划线或划线。
• 文本转换-大写(强制所有文本都是大写)，大写(强制每个单词的第一个字母是大写)，小写(强制所有文本都是小写)。
• 文本颜色—提供两种选择:基地，它在鼠标没有悬停在按钮上时设置文本的颜色。2.交互，它设置与(悬停时)等交互时按钮的文本颜色。

初级文本阴影

主文本阴影控件包括:

• x-设置文本阴影的X轴偏移量。
• y-设置文本阴影的Y轴偏移量。
• 模糊-设置文本阴影的模糊。
• 传播&位置-设置文本阴影的扩散和位置。
• 颜色-设置文本阴影的颜色。

按钮粒子设置

初级粒子设置

粒子设置组包含初始设置交互效果的控件。以下是每个设置的详细信息:

• 启用-使用此选项启用交互粒子。
• 位置-使用这个选项设置粒子的位置相对于它所应用的元素。可用的选项有:
  • 中心
  • 前
  • 左
  • 正确的
  • 底
  • 左上角
  • 右上方
  • 左下
  • 右下角
• 放置-使用这个选项来决定你是否想要粒子重叠与元素或有限的内部元素。
• 规模缩放选项将决定粒子在跃迁中如何膨胀或收缩。可用的选项有:
  • 没有一个如果你不希望粒子在过渡时缩放，使用这个选项。
  • 规模都-使用这个选项缩放粒子在垂直和水平的过渡。
  • 规模X-使用这个选项在过渡时水平缩放粒子。
  • 规模Y-使用这个选项在过渡中垂直缩放粒子。
• 延迟延迟选项将决定转换完成的时间。该选项以秒或毫秒为单位的值取决于选择的值单位。
• 转变始于-使用这个选项来设置粒子的转换应该从哪里开始。可用的选项有:
  • 中心
  • 前
  • 左
  • 正确的
  • 底
  • 左上角
  • 右上方
  • 左下
  • 右下角
• 宽度和高度-使用这个选项设置粒子的宽度和高度。取值单位为Calc，PX，快速眼动，新兴市场,％．
• 半径-使用该选项设置粒子的半径。这些选项值可以使用与宽度/高度选项相同的单位。
• 颜色-使用这个选项设置粒子的颜色。
• 内联CSS-使用此选项添加将应用于文章的自定义CSS。这个选项是为高级用户提供的，他们想要一个额外的定制层，但在粒子的样式选项中找不到。

一次和二次粒子

我们所描述的相同的设置和样式选项可用于初级粒子和次级粒子。你基本上有两套粒子选项来获得创新和创造时尚的互动。

定制

自定义面板包含各种功能，允许你进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置一个HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的样式控制，特别是对嵌套标记。点击在这里有关此功能的更详细信息，如使用el美元动态定位基标签，等等。
• 在断点时隐藏 - - - - - -当需要改变设计时，在不同的屏幕尺寸隐藏元素。点击在这里更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素(例如:”如果特色图像设置…”)．点击在这里更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如。data-info = " 123 ")．这在与各种脚本和库集成时特别有用。

演示

要查看按钮元素的现场演示，请单击在这里．

总结

让我们回顾一下，好吗?我们已经讨论了如何向页面添加Button元素。然后我们通过它的基本设置，设计，图形，文本和粒子设置，使它看起来完全像你想要的方式。