CSS Twitter bootstrap, 按钮的 hover 样式

在本文中，我们将介绍如何使用 CSS 和 Twitter bootstrap 来创建按钮的 hover 样式。按钮是网页设计中常用的元素之一，通过为按钮添加 hover 样式可以提升用户体验，增加交互效果。

阅读更多：CSS 教程

1. 添加按钮样式

首先，我们需要引入 Twitter bootstrap 的 CSS 文件。可以从官方网站下载，也可以使用 CDN 引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

然后，在 HTML 中添加一个按钮：

<button class="btn btn-primary">按钮</button>

这样就创建了一个带有默认样式的按钮，接下来我们来添加 hover 样式。

2. 设置 hover 样式

在 CSS 文件中，可以使用 .btn:hover 选择器来设置按钮的 hover 样式。下面是一个示例，当鼠标悬停在按钮上时，背景色和文本颜色会发生变化：

.btn:hover {
  background-color: #007bff;
  color: #fff;
}

以上代码中，background-color 属性用于设置背景色，color 属性用于设置文本颜色。通过将这些样式应用于 .btn:hover 选择器，我们就可以实现按钮的 hover 效果。

3. 自定义 hover 样式

除了使用默认的 hover 样式外，我们也可以自定义按钮的 hover 效果。例如，我们可以改变按钮的边框颜色、阴影效果等。

.btn:hover {
  border-color: #007bff;
  box-shadow: 0 0 5px #007bff;
}

在上面的代码中，border-color 属性用于设置边框颜色，box-shadow 属性用于设置阴影效果。通过调整这些属性的值，我们可以为按钮的 hover 状态添加更多的样式。

4. 按钮样式变化

除了颜色和阴影等样式的变化外，我们还可以通过 CSS 的过渡效果实现按钮样式的平滑过渡。在 .btn 类上添加 transition 属性，可以定义样式的过渡效果。

.btn {
  transition: all 0.3s ease;
}

在上面的代码中，transition 属性的值设定了过渡的时间和函数。这样，在鼠标移入和移出按钮时，样式的变化会平滑过渡，增强了用户的交互体验。

5. 示例

下面是一个完整的示例，展示了按钮的 hover 效果和过渡效果：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    .btn {
      transition: all 0.3s ease;
    }

    .btn:hover {
      background-color: #007bff;
      color: #fff;
      border-color: #007bff;
      box-shadow: 0 0 5px #007bff;
    }
  </style>
</head>
<body>
  <button class="btn btn-primary">按钮</button>
</body>
</html>

你可以尝试将以上代码复制到一个 HTML 文件中，并在浏览器中运行，查看按钮的 hover 效果和过渡效果。