自定义渐变边界

按钮是网站导航的重要组成部分，是行动的号召。在网站上最重要的按钮周围创建自定义颜色渐变边框可以提高它们的可见性并吸引访问者的注意力。

在这节课中，你将学到:

1. 如何创建一个按钮
2. 如何应用线性渐变边界
3. 如何将按钮颜色与页面颜色相匹配
4. 如何使按钮圆润

如何创建一个按钮

让我们首先创建一个按钮并添加呼吁行动文本。

要建立按钮的结构:

1. 拖一个连接块从添加面板到Webflow画布上
2. 添加一个文本块在连接块
3. 双击默认文本以更改它(例如，“Contact us”)

让我们调整按钮的大小:

1. 选择文本块
2. 开放风格的面板>间距
3. 添加顶部和底部填充15个像素，左边和右边填充30像素

了解更多关于填充的信息间距的教训．

很高兴知道:要同时增加或减少元素互补边的空白或填充，使用选项+鼠标拖动(在Mac)或Alt+鼠标拖动(在Windows上)。

如何应用线性渐变边界

现在，您可以为自定义按钮添加颜色渐变边框。

为Link块添加渐变:

1. 选择连接块
2. 开放风格的面板>背景
3. 按右边的“加号”图标形象和梯度并选择线性梯度作为类型．
4. 改变角方向刻度盘上的坡度(例如，90度)
5. 点击渐变条上的任何地方添加一个停止
6. 点击渐变条下面的颜色样本，为渐变停止选择一种颜色

你可以添加任意多的站点和颜色，这将创建渐变。了解更多关于背景渐变．

如何将按钮颜色与页面颜色相匹配

你可以匹配文本块和页面背景，使按钮显示透明:

1. 选择文本块
2. 开放风格的面板>背景
3. 单击Swatch打开颜色选择器，选择一个颜色来匹配你的页面主体背景的颜色(例如，“白色”)

如何使按钮圆润

现在你可以圆按钮的边缘:

1. 选择连接块
2. 开放风格的面板>间距
3. 添加填充到每一面的连接块(例如,3像素)
4. 选择文本块
5. 开放风格的面板>边界并增加半径(例如，50像素)
6. 选择连接块
7. 开放风格的面板>边界并增加半径(例如，50像素)

就是这样!现在你已经有了一个惊人的自定义渐变边界!