如何在 CSS 中使用带有状态伪类的链接和按钮

笔记首页 >> 教程系列 >> 如何在 CSS 中使用带有状态伪类的链接和按钮

如何在 CSS 中使用带有状态伪类的链接和按钮

作者选择了技术多样性基金来接受捐赠，作为Write for DOnations计划的一部分。

介绍

Web 开发的一个重要部分是在用户与元素交互时提供反馈。这种交互是通过改变state来完成的，它指示用户如何使用或已经使用页面上的给定元素。在 CSS 中，选择器有一些特殊的变体，称为伪类，它允许状态更改启动样式更改。

在本教程中，您将使用:hover，:active以及:focus用户操作和:visited位置伪类。您将使用<a>和<button>作为教程中的交互元素。这两个元素都具有相似的交互状态，并且在功能上与用户相同。从开发的角度来看，<a>元素专门用于与 URL 交互，而<button>元素用于触发表单或JavaScript函数。除了使用这四种不同的状态外，您还将使用该transition属性为这些交互状态之间的样式设置动画。

先决条件

了解 CSS 的级联和特异性功能以及盒模型。
知识的类型选择，组合子选择器，和选择器组。
熟悉文本布局和颜色属性。
保存在本地计算机上的空 HTML 文件index.html，您可以从文本编辑器和选择的 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您不熟悉 HTML，请尝试整个如何在 HTML 中构建网站系列。
一个名为的空 CSS 文件styles.css和一个名为的空 HTML 文件index.html，它们都保存在本地机器上的同一目录中。

设置初始 HTML 和 CSS

要开始使用链接和按钮，您将首先设置作为本教程基础所需的 HTML 和 CSS。在本节中，您将写出所有必要的 HTML 和一些初始 CSS 样式，这些样式将处理布局并开始视觉美感。

首先，index.html在文本编辑器中打开。然后，将以下突出显示的 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

接下来，转到<head>标记并添加一个<meta>标记来定义 HTML 文件的字符集。然后设置页面的标题，添加一个<meta>标签来定义移动设备应该如何呈现页面，最后加载带有<link>标签的 CSS 文件。这些添加在以下代码块中突出显示。随着代码的添加和更改，您将在整个教程中遇到这种突出显示方法：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

添加<head>内容后，下一步移动到添加内容的<body>元素，以使用<a>和<button>标签作为交互元素制作信息块。将此代码块中突出显示的部分添加到index.html文本编辑器中的文件中：

索引.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link and Buttons with State</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <section>
      <header>
        <button class="link" type="button">
          Close Window
        </button>
      </header>
      <div>
        <p>
          This is a demo paragraph for some demo content for a tutorial. By reading this text you are now informed that this is text for the demo in <a href="https://do.co/tutorials">this tutorial</a>. This means you can agree to use this content for the demo or not. If you wish to continue with this tutorial demo content, please select the appropriately styled interactive element below.
        </p>
        <div>
          <button class="button" type="button">
            Yes, Please
          </button>
          <a class="button" href="#">
            No, Thank you
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

保存更改index.html并打开 Web 浏览器以在index.html那里打开文件。页面内容将以白色背景上的黑色衬线字体显示。该<button>元素的样式会根据你的浏览器和操作系统，但页面将类似于下图：

白色背景上的黑色衬线文本，带有两个蓝色下划线链接和两个交互式按钮。

接下来，styles.css在与文件相同的目录中创建一个index.html文件。代码块中的以下样式将为包含您将在本教程其余部分设置样式的<button>和<a>元素的容器设置基本样式。将以下代码添加到您的styles.css文件中：

样式文件

body {
  background-color: #454545;
  color: #333;
  font-family: sans-serif;
  line-height: 1.5;
}

section {
  margin: 2rem auto;
  width: 90%;
  max-width: 50rem;
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 2rem;
  border: 0.25rem solid #777;
  background-color: white;
}

header {
  text-align: right;
}

此代码块中的 CSS 为演示内容区域的三个部分添加了样式。第一个是body选择器，它应用深灰色背景，然后定义默认字体属性。第二个选择器专注于<section>元素，它是演示内容的主要容器，并创建一个带有大圆角和最大宽度的白色块，因此它只会增长到指定的数量。最后，header元素选择器将文本对齐设置为右侧，因此关闭窗口按钮位于<section>容器的最右上角。

如果您想了解有关如何使用 CSS 元素选择器的更多信息，请查看如何使用 CSS 选择要设置样式的 HTML 元素。

保存对styles.css文件的更改并index.html在浏览器中重新加载文件。页面样式将从浏览器默认转换为自定义样式，如下图所示：

白色容器中的黑色无衬线文本，带有圆角，带有两个蓝色下划线链接和两个交互式按钮。

您已经设置了 HTML 并加载了页面内容的基本样式。接下来，您将创建一个自定义默认链接样式，并提供一种将该默认样式应用于button元素的方法。

为文本链接创建样式

在本节中，您将通过设置新颜色来创建自定义默认链接样式。然后您将删除默认按钮样式，以使按钮看起来像默认链接。a并且button具有不同的目的，但网站用户以类似的方式与两者进行交互。有时，这两个元素需要看起来相似，以帮助向用户解释交互或匹配设计美学。

对于本节的第一部分，您将设置将在通用<a>元素上使用的默认链接样式和一个类.link，然后可以将通用链接样式应用于<button>元素。首先创建一个组选择器，其中包含一个a元素选择器和.link一个color属性和值为的类选择器#25a：

样式文件

...
a,
.link {
  color: #25a;
}

保存更改styles.css并index.html在浏览器中打开。在<a>页面上的元素现在蓝色比浏览器默认链接蓝色更深。此外，<button>带有的元素class="link"在按钮中具有相同的蓝色文本。浏览器中变化的外观如下图所示：

白色容器中的黑色无衬线文本，带有圆角，带有两个蓝色下划线链接和两个交互式按钮。

接下来，开始删除button. 默认情况下，浏览器对<button>元素的外观和感觉添加了大量自定义，以确保它们可作为交互式元素进行区分。要删除浏览器添加到这些元素的额外样式，请返回到styles.css您的文本编辑器中，创建一个button元素选择器，并添加两个类似的属性，如以下代码块所示：

样式文件

...
a,
.link {
  color: #25a;
}

button {
  -webkit-appearance: none;
  appearance: none;
}

第一个属性是-webkit-appearance: none;，它被称为供应商前缀属性。-webkit-属性的位置只能由构建在 WebKit 浏览器引擎的衍生版本上的浏览器读取，例如Safari或Chrome。这些浏览器的某些版本appearance本身不支持该属性，需要-webkit-前缀才能工作。

供应商前缀的使用正在下降，但仍然存在。重要的是将任何供应商前缀的属性放在非前缀之前，以避免在支持前缀和非前缀变体的浏览器上覆盖属性。

保存您的更改styles.css并index.html在浏览器中刷新。该button元素将不会失去其所有的风格; 相反，它将被简化为 Web 规范所期望的默认样式。下图演示了它在浏览器中的显示方式：

白色容器中的黑色无衬线文本，带有圆角，带有两个蓝色下划线链接和两个交互式按钮。

要删除按钮的其余默认样式，您需要添加更多属性。styles.css在文本编辑器中返回到您的文件并转到button选择器。接下来，您将添加的属性删除background-color，border，margin，和padding。然后你就删除属性的button元素color，font以及text-align，对inherit页面的价值。

以下代码块演示了如何设置：

样式文件

...
button {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: center;
}

将这些更改保存到Web 浏览器styles.css并index.html在其中刷新。两个按钮现在都失去了它们的默认样式，关闭窗口按钮的样式更接近链接。的是，请按钮样式将在下一节讨论。下图演示了它在浏览器中的显示方式：

白色容器中的黑色无衬线文本，带有圆角，带有两个蓝色下划线链接和两个显示为纯文本的交互式按钮。

要完成使关闭窗口按钮看起来像文本链接，请styles.css在文本编辑器中打开。在a, .link组选择器下方，仅为.link该类添加一个新的类选择器。添加text-decoration一个值为的属性underline。然后添加一个名为的属性cursor，该属性定义鼠标光标在该元素上的显示方式，并将值设置为pointer。该pointer值的风格光标是手摇式出现在默认的链接：

样式文件

...
a,
.link {
...
}

.link {
  text-decoration: underline;
  cursor: pointer;
}
...

将这些更改保存到您的styles.css文件，然后返回到您的浏览器并刷新index.html。在关闭窗口按钮将会出现，并以类似的方式表现的通用<a>元素的样式。以下动画演示了光标在关闭窗口按钮上移动时的变化：

一个按钮样式看起来像带有蓝色文本和下划线的默认链接。

在本节中，您为<a>元素创建了自定义默认样式并创建了一个.link类以将链接样式应用于<button>元素。在下一部分中，您将创建一个自定义的、类似按钮的样式，它可以同时应用于<button>和<a>元素。

为按钮创建样式

接下来，您将使用类选择器创建一个自定义的类似按钮的样式，以便可以在 a<button>或<a>元素上使用这些样式。与<a>在整个文本内容中使用的元素不同，<button>元素具有更有意的用途。这使得为<button>元素创建通用样式的必要性降低，而是允许您始终添加class属性。

首先styles.css在文本编辑器中打开。创建一个名为的新类选择器.button。这里的样式将重新定义许多在button元素选择器上一步中重置的属性。您将使用color属性为文本添加颜色，使用属性填充形状background-color，然后使用属性提供一些定义border。之后，您将为带有border-radius属性的按钮指定一个圆角。最后，您将使用padding速记在文本上方和下方留出空间，然后在左右两边加倍。

以下代码块包含这些值：

样式文件

...
.button {
  color: #25a;
  background-color: #cef;
  border: 1px solid #67c;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
}

保存更改styles.css并返回到浏览器以刷新index.html文件。Yes, Please和No,Thank you按钮的外观将更改以匹配属性。文本与默认a样式相同，背景为浅蓝色，边框为深蓝色。下一张图片演示了它在浏览器中的显示方式：

文字下方有两个按钮，一个按钮比另一个按钮高。较短的按钮带有下划线文本。

两个按钮之间的大小有明显差异。由于“不，谢谢”按钮使用的是<a>元素而不是<button>，因此需要将一些附加属性添加到.button选择器中以平衡这两个元素之间的默认值。

返回到styles.css您的文本编辑器并转到.button类选择器。首先，添加一个display: inline-block，这是button元素的默认样式。接下来，添加 atext-decoration: none以从<a>元素中删除下划线。正如您对.link选择器所做的那样，cursor: pointer当鼠标光标悬停在元素上时，将 a 添加到选择器以获取指向手图标。最后，添加vertical-align: bottom规则。并非所有浏览器都需要最后一个属性，但它定义了元素底部在一行中的位置：

样式文件

...
.button {
  color: #25a;
  background-color: #cef;
  border: 1px solid #67c;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  vertical-align: bottom;
}

将这些添加保存到浏览器中styles.css，然后index.html在浏览器中刷新。这两个按钮现在在视觉外观上是等效的，并且相互借用了默认属性，因此它们被认为具有相似的交互作用。

文本带有两个等高的浅蓝色按钮，带有深蓝色文本和深蓝色细边框。

在本节中，您创建了一个自定义类选择器，以使用类似按钮的样式为<button>和<a>元素设置样式。接下来，当鼠标光标位于交互元素顶部时，您将创建一个条件样式。

将`:hover`伪类应用于链接和按钮

现在，您将使用:hover伪类创建当光标位于元素上时显示的替代样式。伪类是一组特殊的条件，由冒号 ( :) 和附加到选择器的条件名称定义。例如，a带有悬停伪类的元素选择器变为a:hover。

styles.css在文本编辑器中打开。在用于的组选择器下方a, .link，通过为每个选择器附加:hover伪类：为悬停状态添加一个新选择器a:hover, .link:hover。然后，要在光标悬停在元素上时进行显着更改，请添加color值为的属性，该属性#b1b为深粉色：

样式文件

...
a,
.link {
  ...
}

a:hover,
.link:hover {
  color: #b1b;
}
...

保存对styles.css文件的更改并index.html在浏览器中刷新。将鼠标悬停在本教程链接或关闭窗口按钮上以启动悬停时的颜色更改。下图显示了当光标悬停在本教程链接上时悬停状态的样子。

一段带有链接的文本，链接上有一个手形光标图标。链接文本是带有下划线的深粉色。

接下来，要向.button元素添加悬停状态，请返回到styles.css文本编辑器中。在.button类选择器下方，添加一个.button:hover选择器来创建专门用于悬停交互的样式。接下来，在选择器中，添加颜色属性，当光标位于按钮上时，这些属性将更改按钮外观。将一个color属性设置为white，然后创建一个background-color和一个，border-color并将两个属性都设置为#25a：

样式文件

...
.button {
  ...
}

.button:hover {
  color: white;
  background-color: #25a;
  border-color: #25a;
}

将这些更改保存到您的styles.css文件并返回到您的浏览器以刷新index.html文件。现在，将鼠标光标悬停在底部的两个按钮之一上。样式从带有深蓝色文本和边框的浅蓝色背景变为带有白色文本的深蓝色背景。下图显示了当鼠标光标位于Yes, Please按钮上时悬停样式的外观。

一段文字下方的两个按钮。一个按钮上有一个手形指针光标，呈深蓝色，带有白色文字。另一个按钮为浅蓝色，带有深蓝色文字。

您:hover在本节中使用了伪类，根据位于元素顶部的光标创建元素的样式更改。在下一节中，您将把相同的概念应用到使用键盘浏览页面时的条件。

应用`:focus`伪类

网站访问者有时会使用键盘来导航页面元素并与之交互，而不是使用鼠标或触摸屏。这通常是通过使用TAB键来完成的，该键将循环浏览页面上的交互元素。默认样式使用该outline属性来提供元素具有焦点的视觉指示符。可以通过使用:focus伪类为这种情况应用属性值来自定义此样式。

要开始处理页面上元素的焦点状态，请styles.css在文本编辑器中打开文件。从a:hover, .link:hover组选择器下方的新选择器开始，并为焦点状态使用新的组选择器：a:focus, .link:focus。

自定义焦点状态最重要的部分是确保它与默认状态明显不同。在这里，您将使:focus伪类样式具有金色背景的黑色文本：

样式文件

...
a:hover,
.link:hover {
  ...
}

a:focus,
.link:focus {
  color: black;
  outline: 2px solid gold;
  background-color: gold;
}
...

在这种情况下，您将color属性设置为black并将background-color属性设置为gold。您还使用了outline属性，它在文本边缘周围添加了一些金色，在background-color属性可以到达的地方之外。

该outline属性的工作方式类似于border速记属性，因为它接受宽度、样式和颜色。但是，与border属性不同的是，它outline始终围绕整个元素，不能设置到特定的一侧。此外，与不同border，outline不会影响盒模型；形状仅在视觉上应用，不会改变内容的流动。

保存更改styles.css并index.html在 Web 浏览器中刷新。开始按TAB键，直到浏览器将焦点移至关闭窗口，并且本教程元素以金色背景突出显示。下图显示了本教程链接在获得焦点时在浏览器中的样子：

一段带有链接的文本。链接文本为带有下划线和黄色背景的黑色。

接下来，要将类似的自定义焦点样式应用于.button类元素，首先要创建.button:focus类和伪类选择器。由于该.button元素已经在使用border，您将使用它来指示焦点，因此outline通过将属性设置为值来删除默认值none。与之前的链接一样，color属性将设置为black并且background-color属性将设置为gold。最后，将border-color属性设置为值black：

样式文件

...
.button:hover {
  ...
}

.button:focus {
  outline: none;
  color: black;
  background-color: gold;
  border-color: black;
}

请务必将添加的内容保存styles.css到浏览器中，然后返回到浏览器以刷新index.html文件。同样，使用TAB键，在页面上可通过键盘聚焦的元素之间循环，直到到达这些.button元素。它们现在将以金色背景和带黑色边框的黑色文本点亮。下图演示了“是，请”按钮在聚焦时如何显示在浏览器中：

一段文字下方的两个按钮。一个按钮以黑色文本和黄色背景黑色边框为重点。另一个按钮为浅蓝色，带有深蓝色文字。

在本节中，您使用:focus伪类创建了在网站访问者使用键盘导航页面时显示的自定义样式。在下一节中，您将使用:active伪类来指示用户何时通过鼠标单击或按键与元素进行交互。

应用`:active`伪类

您将使用的下一个伪类是:active交互式元素的状态。活动状态是与元素交互的状态，通常通过鼠标按下或鼠标单击操作。这提供了机会，让访问者清楚地表明鼠标单击和按钮按下成功。

要开始使用:active伪类，请styles.css在文本编辑器中打开。在组选择器块 for 之后a:focus, .link:focus，添加一个带有组选择器的新选择器块a:active, .link:active。给出color一个值#808，这将创建一个比:hover状态更深的粉红色。

请注意，某些浏览器会混合使用:focus伪类和:active伪类的样式。为了防止这种情况，您需要通过将outline和background-color属性分别设置为noneand来删除它们transparent：

样式文件

...
a:focus,
.link:focus {
  ...
}

a:active,
.link:active {
  color: #808;
  outline: none;
  background-color: transparent;
}
...

将添加的:active伪类保存到您的styles.css文件中，然后index.html在您的 Web 浏览器中重新加载。以下动画显示:active了在本教程链接上单击鼠标时状态如何从粉红色变为深粉红色。

涉及一段文本的动画，其中带有一个链接，链接上有一个手形光标图标。链接文本带有下划线，并在深粉色和深粉色之间交替。

接下来，要将活动状态应用于.button，请styles.css在文本编辑器中返回。添加.button:active伪类选择器并应用样式的深色变体:hover样式。对于color属性，使用将值设置为浅灰色#ddd。对于background-color和border-color属性，将值设置为深蓝色，值为#127。以下代码块的突出显示部分演示了如何编写：

样式文件

...
.button:focus {
  ...
}

.button:active {
  color: #ddd;
  background-color: #127;
  border-color: #127;
}

请务必将这些更改保存到styles.css，然后返回到浏览器进行刷新index.html。将鼠标光标悬停在内容底部的两个按钮之一上，然后单击向下。该按钮将在悬停时从带有蓝色文本和边框的浅蓝色背景变为带有白色文本的全蓝色按钮，然后在单击时变为带有浅灰色文本的深蓝色按钮。以下动画演示了单击鼠标按钮时从:hover到:active状态的变化是如何出现的：

光标按下按钮的动画，将按钮从带有白色文本的蓝色变为带有浅灰色文本的深蓝色。

您通过使用:active伪类在该事件发生时更改样式来创建鼠标按钮按下事件的可视指示器。在下一节中，您将使用:visited伪类来提供指示哪些<a>具有href属性的元素访问了该链接。

应用`:visited`伪类

该:visited伪类不同于本教程中介绍以前的伪类。在先前的伪类涉及用户与元素的主动交互的情况下，:visited伪类指示元素先前与之交互。具体来说，:visited伪类指示浏览器历史记录中存在哪些<a>具有href属性的链接，这意味着这些链接已被访问过。

要:visited在文本链接上创建自定义指示器，请styles.css在文本编辑器中打开您的文件。在a:active, .link:active组选择器下方，添加一个针对a:visited, .link:visted组选择器的新组选择器。默认:visited链接样式通常为紫色。出于演示的目的，:visited颜色将为深绿色。

添加color值为的属性#080，如以下突出显示的代码所示：

样式文件

...
a:active,
.link:active {
  ...
}

a:visited,
.link:visited {
  color: #080;
}
...

将此更改保存到styles.css文件中，然后index.html在 Web 浏览器中打开。如果还没有，请继续并单击本教程和不，谢谢 <a>元素链接。这两个链接的文本颜色均为深绿色，如下图所示：

带有下划线和绿色的已访问链接以及下面的两个按钮的文本段落。按钮的文本之一是绿色而不是深蓝色。

现在，按钮中的绿色文本分散了“不，谢谢”按钮的用途。此外，当访问的链接再次与:hover或:active状态交互时，深绿色保留而不是为每个相应状态定义的颜色。

要解决这些情况，请styles.css在文本编辑器中返回到您的文件。首先，附加a:hover, .link:hover组选择用的附加场景:visited具有有源元件:hover通过添加状态a:visited:hover, .link:visited:hover。同样，用扩展a:active, .link:active选择器块a:visited:active, .link:visited:active。最后，.button元素所需的访问状态的样式与默认状态相同。因此，.button选择器需要成为的组选择器.button, .button:visited，因此访问状态看起来与默认状态相同：

样式文件

...
a:hover,
.link:hover,
a:visited:hover,
.link:visited:hover {
  color: #b1b;
}
...
a:active,
.link:active,
a:visited:active,
.link:visited:active {
  color: #808;
}

a:visited,
.link:visited {
  color: #080;
}
...
.button,
.button:visited {
  ...
}

.button:hover,
.button:visited:hover {
  color: white;
  background-color: #25a;
  border-color: #25a;
}
...

保存对styles.css文件的更改并index.html在 Web 浏览器中重新加载。文本默认:visited链接现在以所需的深绿色显示，而按钮样式链接保留按钮外观。下图演示了这将如何出现在浏览器中。

带有下划线和绿色下划线的已访问链接以及下面两个样式相似的按钮的文本段落。

您使用:visited伪类创建特定于浏览器历史记录中出现链接时的样式，向用户指示已访问的链接。本节总结了伪类的工作，并使用它们来定义给定状态的特定样式。在本教程的最后一部分，您将使用该transition属性在这些不同的伪类状态之间创建无缝动画。

使用`transition`动画国之间

在处理元素状态时，状态之间的样式转换可能会很突然。该transition属性用于从一个状态到下一个状态混合和动画样式，以避免这种突然性。该transition属性是结合了一个速记属性transition-property，transition-duration和transition-timing-function属性。

的transition-property可以是具有两个给定值之间的计算出的值的任何属性。颜色包含在其中，因为它们是数值，即使使用颜色名称也是如此。该transition-duration属性是一个数字值，表示转换应该发生多长时间。持续时间的值通常以秒为s单位表示，或以毫秒为ms单位表示。最后，transition-timing-function控制动画随时间播放的方式，使您能够进行细微的更改以增强动画效果。

要开始使用该transition属性，请打开您的styles.css文件并转到a, .link组选择器和.button, .button:visited组选择器。添加transition值为的属性all 0.5s linear。该all是对价值transition-property，它告诉浏览器以动画的所有属性的状态之间变化。的0.5s是transition-duration值和相当于半秒; 这也可以表示为500ms。最后，linear位置是transition-timing-function值，它告诉浏览器在整个持续时间内以恒定增量从一个值移动到下一个值：

样式文件

...
a,
.link {
  ...
  transition: all 0.5s linear;
}
...
.button,
.button:visited {
  ...
  transition: all 0.5s linear;
}

保存更改styles.css，然后index.html在 Web 浏览器中打开。页面加载后，开始与链接和按钮元素交互，并注意样式在不同状态之间的动画效果。下面的动画展示了按钮样式从默认状态转换到:hover伪类状态：

光标悬停在按钮上的动画，按钮将样式从带有蓝色文本的浅蓝色按钮转换为带有白色文本的蓝色按钮。

要使动画感觉更活泼自然，请返回到您的styles.css文件并调整transition属性值。对于a,.link组选择器，将持续时间从更改0.5s为250ms，这是之前持续时间的一半。然后将linear计时函数值更改为ease-in-out。这将创建一个开始缓慢、中间加速、最后减速的动画。然后，对于.button,.button:visited组选择器，将持续时间更改为更快180ms，并将计时功能设置ease-in-out为与链接相同的值：

样式文件


...
a,
.link {
  ...
  transition: all 250ms ease-in-out;
}
...
.button,
.button:visited {
  ...
  transition: all 180ms ease-in-out;
}

将这些更改保存到您的styles.css文件中，然后index.html在您的 Web 浏览器中刷新页面。状态之间的过渡动画仍将是动画，但现在速度更快，感觉也更快。对于该transition属性，重要的是使用这些值来找到适合设计的动画。下面的动画演示了按钮从默认状态到:hover状态到:active状态的更快转换。

光标悬停在按钮上的动画，按钮将样式从带有蓝色文本的浅蓝色按钮转换为带有白色文本的蓝色按钮。然后光标移动并悬停在带绿色下划线的链接上，链接淡化为粉红色。

您现在已经创建了状态之间的动画。该transition属性有助于使状态之间的变化更具吸引力和乐趣。

结论

提供交互式元素状态之间的明显差异是网站的宝贵资产。状态通过为交互提供视觉反馈来帮助向网站访问者传达重要概念。

在本教程中，您已成功使用主要状态伪类为不同的交互元素创建多种样式。您还了解到<button>和<a>元素背后有不同的用途，但在视觉上它们可以传达相似的概念。最后，您使用该transition属性在这些状态之间提供流畅的动画，以创建更具吸引力的交互元素。在创建网站时牢记这四种状态非常重要，以便为访问者提供这一重要的交互式反馈。

如果您想阅读更多 CSS 教程，请尝试使用 CSS 系列设置 HTML 样式中的其他教程。

觉得文章有用？

点个广告表达一下你的爱意吧！