如何使用CSS创建简单的按钮外观

在我的“ 实用Web动画”课程的视频中，您将学习如何使用CSS创建简单的悬停效果。 通过将鼠标悬停在背景和文本颜色上，我们将使导航按钮更加有趣。 您还将学习一些巧妙CSS技巧，以使菜单在页面上正确居中。

如何创建简单的按钮外观

分叉笔并进行样式更改

您需要做的第一件事是在CodePen上创建自己的起始笔版本，其中包含您需要入门的所有代码。

因此，一旦打开它，请继续并单击Fork按钮以创建它的新副本，然后就可以开始在新副本中进行更改。

首先，我想减少按钮之间的空间。 您可以通过将margin-right设置为4px 。 您会发现它们之间的距离更近了。

居中菜单

接下来，我们要将导航置于页面中心。 默认情况下，无序列表是块级元素，居中一个块级元素的最简单方法是使用margin: 0 auto; 。

我们的无序列表具有.main-nav类，因此请.main-nav该规则并添加margin: 0 auto; 。

最初，这是行不通的，因为由于它是一个块级元素，因此默认情况下它将占用浏览器或其容器的整个宽度。

因此，为了居中，我们首先需要给它一个宽度。 我希望它的宽度由菜单中项目的数量以及这些项目所占用的空间确定。

我们有五个按钮，每个按钮的宽度为140像素。 然后，我们在每个4像素的列表项上都留有一个边距右移。 因此，总宽度为5 x 140 = 700，加上两者之间的间距为4 x 4 =16。因此，此无序列表的总宽度为716 px。

但是，如果我们添加width: 716px; 在.main-nav类中，它不起作用。 您会看到它确实居中，但已将“联系我们”按钮下移到下一行。

这是因为“与我们联系”按钮的右边距为4像素。 因此，正是第五个边距右边使它比716像素宽。

我们可以通过将宽度设置为720来解决此问题，但是由于我们在右边有四个额外的边距像素，因此无法完美居中。 因此，更好的选择是简单地摆脱最后一个列表项的边距右边。

我们可以通过创建新规则来做到这一点：

.main-nav li:last-child {
margin-right: 0;
}

当我们这样做时，一切工作正常，现在我们可以将宽度降低到716像素，并且我们看到“与我们联系”按钮没有分解到下一行。

我们应该做的另一件事是将菜单缩小一点，以使其离浏览器窗口的顶部不太近。 所以代替margin: 0 auto; ，我们可以做margin: 20px auto 。 这将使其顶部和底部的空白为20像素。 然后， auto显然会水平居中。

创建悬停效果

现在，让我们创建悬停效果。 现在，我们的定位标记根本没有应用背景色。 因此，让我们从列表项中获取背景色，将其剪切，然后将其向下移动到我们的锚标记本身。 因此，现在我们的锚标签具有该背景色。

然后，我们将为这些锚定标记的悬停效果创建一个新规则：

.main-nav li a:hover {
 background-color: #349;   
}

现在，当我们将鼠标悬停在按钮上时，背景消失了。

为了使它更加醒目，我们将添加一个微妙的淡入淡出。 当我们要淡入淡出一个项目时，我们首先需要确定需要将此过渡属性应用于哪个规则。 我们不会将其应用于悬停规则； 我们将其应用于该主导航内锚标签的原始规则。

因此，对于该原始规则，我们将添加transition: all .5s; 。 这意味着我们决定进行动画处理的任何属性都将继续进行动画处理，并且将持续半秒钟。 所以现在当我们将鼠标悬停在每个按钮上时，我们会看到一个微妙的淡入淡出。

同时使两件事消失

让我们稍微调整一下，以便我们同时淡化两个不同的事物。 因此，让我们将工作保存在CodePen中，然后生成一个新版本。

然后完全去除背景色，并在按钮周围放置边框。 因此，对于我们最初的锚标记规则，我们将摆脱背景颜色，而要有一个边框。 因此添加border: 1px solid white; 。

您会注意到，所有内容再次中断，并且“联系我们”按钮跳至下一行。

这是因为每当您向已具有定义宽度的项目添加边框时，该边框都会使该项目变大。 因此，我们将宽度设置为140像素，但是左边有一个像素的边框，右边有一个像素的边框，使整个宽度为142像素。

这是默认行为，但是有一个名为box-sizing的属性，允许我们更改该默认行为。 如果将box-sizing更改为border-box ，则项目的最终宽度将是我们为其定义的宽度。 因此，如果我们定义一个140 px的宽度，然后向其添加边框，则这些边框将显示在该项目内部 ，并且该项目的最终宽度仍为140 px。

因此，您可以转到顶部并添加新行：

* { box-sizing: border-box; }

当我们这样做时，您会看到它自动修复。

现在，当我们将鼠标悬停在这些锚标记上时，我希望背景颜色变为白色，并且希望文本变为蓝色。

因此，我们将背景色设置为白色（ #fff ），而不是将背景色设置为人体背景色。 所以现在当我们将鼠标悬停在按钮上时，背景颜色变为白色。 现在我们只想将文本的颜色更改为#349 ，即与背景相同的蓝色。

因此，现在当我们将鼠标悬停在它们之上时，它本身就会反转。 文本为白色，现在与背景相同为蓝色。 并且背景为蓝色，已变为白色。

观看完整课程

在整个课程“ 实践Web动画”中 ，我将向您展示使用简洁CSS和jQuery为按钮，价格表和其他Web元素创建动画的实用方法。

您可以通过订阅Envato Elements立即学习本课程。 以低廉的月费，您不仅可以访问此课程，还可以访问我们不断发展的图书馆，其中包含1,000多个视频课程和Envato Tuts +上行业领先的电子书。

另外，您现在可以从庞大的Envato Elements库（拥有300,000多种创意资产）中进行无限下载。 使用独特的字体，照片，图形和模板进行创建，并更快地交付更好的项目。

翻译自: https://code.tutsplus.com/tutorials/how-to-create-simple-button-fades--cms-29887