按钮

按钮作为行动的调用(CTA)和指向页面、表单、资产等的链接。

在这节课中:

1. 按钮基础知识
2. 按钮状态
3. 动画过渡
4. 多个按钮
5. 自定义链接块
   

按钮基础知识

控件中添加一个按钮添加面板(A) >元素标签>基本部分．通过双击按钮或选择按钮并按下，编辑按钮文本输入．

要添加背景色，请单击风格的面板在右侧，滚动到背景，并从颜色选择器中选择一种颜色。

的按钮字体和所有字体样式都继承自身体(所有页)标签。要进行更改，请进入身体(所有页)标签的风格的面板设置和覆盖字体默认值。

当您对新元素进行更改时，将自动创建一个类。类允许您控制和重写样式。若要重用样式，请单击类标签并重命名它。

按钮的大小由里面的文本(文本长度、字体大小、行高)和填充(按钮内部的空间)决定。

要覆盖填充默认值，请在风格的面板下间距>填充,保持选项(在Mac)或Alt(在Windows上)，然后单击并拖动光标。这将同时调整两个填充值(两边或顶部和底部)。

你可以通过改变按钮的大小来调整它宽度而且高度在风格的面板下大小．

按钮可以链接到URL、内部或外部页面、页面部分、文件下载，也可以触发电子邮件或电话。

您可以单击画布中按钮元素上的齿轮图标，或者打开设置面板在右侧调整您的按钮设置。

了解更多关于链接设置．

按钮状态

如果你点击进入选择器字段风格的面板，您将看到所有的按钮状态。默认情况下，按钮上没有悬停样式。你可以点击进入徘徊状态，以修改鼠标悬停在按钮上时的外观。

在这里，你还可以设置背景颜色来改变悬停。如果将颜色选择添加为全局色板，则可以在整个项目中重用它。

你可以在悬停下方设置任何其他样式影响，比如添加一个变换．选择移动例如，使按钮在悬停时移动。

了解更多:

• 州
• 添加状态之间的转换
  

要使用其他按钮属性，请切换出徘徊州没有一个下拉菜单中选择器．你可以通过改变半径下边界部分。

要为按钮添加阴影，请进入影响部分的风格的面板，单击旁边的加号盒阴影,并配置设置(例如软化模糊设置为20px，然后设置角到180)。因为这不是悬停状态，您可以设置距离而且颜色不透明度为0。稍后，我们将添加一个框阴影，将抵消这些值，使悬停效果更戏剧性。

现在当你点击回到你的徘徊状态，您可以修改您刚刚创建的相同的阴影(调整它以改变悬停)。你可以增加不透明度(例如设置不透明度为20%)和改变距离(例如3px)。

返回到没有一个状态以测试按钮在悬停时的工作情况。

了解更多关于使用框阴影．

动画过渡

动画过渡使得在无和悬停状态之间的移动更加平滑。

要添加过渡，请确保您在没有一个状态(总是从None状态添加过渡)在样式面板。在影响部分，单击旁边的加号转换．单击进入旁边的菜单类型并选择背景颜色．默认持续时间设置为200，这意味着它将在200毫秒内转换。将鼠标悬停在按钮上进行测试。

要使阴影有动画效果，请对盒阴影属性和改变放松曲线。默认是“ease”，但您可以尝试更戏剧性的开始和更渐进的结束(“ease out circular”是一个不错的选择)。因为开始是如此戏剧化，您可能想要将计时扩展到1000毫秒。

悬停以预览您的工作。

你总是可以按Escape(在Mac和Windows上)来取消选择一个元素，但元素边界(悬停测试时的蓝色轮廓)可能会分散注意力。在断点图标旁边，您可以选择隐藏元素的边缘。

若要移动悬停按钮，请返回徘徊状态选择器在样式面板上，在影响部分，单击旁边的加号2D和3D转换．增加你的移动值(例如3PX)。

您还可以添加转换转换。回到没有一个状态为你的按钮。向下滚动到效果部分，并再次单击旁边的加号转换．在“类型”旁边，从菜单中选择“转换”并更改您的宽松(例如“ease out circular”)和持续时间(例如到1000毫秒)。

以预览模式检查您的工作。

多个按钮

要将多个按钮放在一起，请复制并粘贴第一个按钮。按住Alt键，同时拖动边距箭头，将在按钮两边创造空间，并保持居中对齐。记住，您对带有该类的任何按钮所做的样式更改将影响带有该类的所有按钮。

你可以添加一个div块，命名它(例如Button wrapper)，然后把每个按钮拖进去，而不是在英雄区域的按钮中添加一个特殊的类。这可以让您管理一个按钮类，并为完美对齐设置负边界。

这在任何地方都适用——你可以使用一个按钮包装器(带负边距)来抵消你在任何地方设置的任何对称边距。您不必因为按钮的对齐方式不同而管理不同的按钮组。

自定义链接块

链接块就像div块——它是一个盒子，我们可以把元素放在里面。拖一个连接块在你的画布上添加面板下基本并命名它以应用一个类。

从添加面板下排版拖一个文本块画在画布上连接块，并双击编辑文本。要消除下划线，请单击X旁边风格在字体部分的风格的面板．您可以在同一个面板中更改链接的颜色。

你可以添加一个图标(例如一个箭头)通过拖动它在链接块的右边。如果您使用样式面板来输入值，而不是单击和拖动角来调整图标的大小，那么自动创建的类将允许您在整个项目中每次重用此链接块时更改箭头的大小。

控件中的设置使图标在按钮内对齐风格的面板下布局(如。显示:中心,对齐:居中)并调整您的页边距间距．

因为您将flex添加到Main按钮类中，所以顶部的两个按钮将占据button包装器div块的全部宽度。要解决这个问题，请选择您的按钮包装在导航器,而在风格的面板下布局,设置显示中心。

这只是一个开始，你可以做的还有很多。尤其是在交互和动画．我们有关于这些主题的完整课程和大量的视频和文章——如果你还没有看过，可以在Webflow University上查看。