HTML 如何在CSS中为点击的按钮设置样式

在本文中，我们将介绍如何使用CSS样式为点击的按钮设置样式。CSS是一种用于为HTML文档添加样式和布局的标记语言。通过使用CSS，我们可以改变按钮的颜色、大小、字体样式以及其他各种外观特性。

阅读更多：HTML 教程

1. 使用:hover选择器实现鼠标悬停效果

:hover是CSS中的一个伪类选择器，它可以用于在鼠标悬停时改变按钮的样式。例如，如果我们想在鼠标悬停在按钮上时改变其背景颜色，可以使用以下代码：

button:hover {
  background-color: red;
}

这段代码将使按钮的背景颜色变为红色，当鼠标悬停在按钮上时。
我们可以根据需要自定义:hover选择器的样式，如改变文字颜色、边框样式等。

2. 使用:focus选择器实现按钮获取焦点的效果

:focus是CSS中的另一个伪类选择器，它可以用于在按钮获取焦点时改变其样式。当用户使用Tab键在按钮之间切换时，按钮会获取焦点。我们可以使用:focus选择器来改变按钮的样式。

button:focus {
  border: 2px solid blue;
}

这段代码将在按钮获取焦点时将其边框样式改为蓝色实线边框。我们可以根据需要自定义:focus选择器的样式，例如改变背景色、字体样式等。

3. 使用:active选择器实现按钮按下的效果

:active是CSS中的另一个伪类选择器，它可以用于在按钮被按下时改变其样式。当用户点击按钮时，按钮会处于活动状态。我们可以使用:active选择器来改变按钮的样式。

button:active {
  background-color: green;
}

这段代码将在按钮被按下时将其背景颜色改为绿色。我们可以根据需要自定义:active选择器的样式，例如改变边框样式、字体颜色等。

示例代码

下面是一个完整的示例代码，展示了如何为点击的按钮设置样式：

<!DOCTYPE html>
<html>
<head>
  <title>Button Styling</title>
  <style>
    button:hover {
      background-color: red;
    }

    button:focus {
      border: 2px solid blue;
    }

    button:active {
      background-color: green;
    }
  </style>
</head>
<body>
  <button>Click me</button>
</body>
</html>