🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：悬停时改变颜色的按钮（:hover）

📝 使用场景

当你希望在用户将鼠标悬停在按钮上时提供视觉反馈，可使用本模板。这是一种常见的提升用户体验的方式。

📘 说明

使用 :hover 伪类来改变按钮的 background-color，配合 transition 实现平滑过渡。

🔹 部分代码

<button class="hover-button">鼠标悬停试试</button>

<style>
  .hover-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .hover-button:hover {
    background-color: #0056b3;
  }
</style>

🔸 完整 HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>悬停变色按钮</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .hover-button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .hover-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <button class="hover-button">鼠标悬停试试</button>
</body>
</html>
已复制！

🎨 实用的悬停效果设计技巧

按钮的悬停（hover）效果是传达用户交互的重要 UI 元素。使用:hover伪类实现颜色变化，可以直观地告诉用户该元素是可点击的。

🌈 配色设计的多样性

除了基础的蓝色（#007bff → #0056b3）外，还可以根据网站的色彩主题进行调整。例如绿色可以使用#28a745 → #218838，红色则可用#dc3545 → #c82333。保持对比度比率在4.5:1以上，有助于提升无障碍性。

✨ 提升交互感

通过添加transition: all 0.3s ease，可以让颜色、大小、阴影等变化更加平滑。结合transform: scale(1.05)，按钮在悬停时稍微放大，增强互动感。但应避免过度动画，建议变化时间控制在0.3秒以内。

📱 响应式设计要点

在触控设备上，可结合使用:active伪类以替代:hover效果。移动端建议增大按钮的padding（如12px 24px），提升点击区域。同时，通过@media (prefers-color-scheme: dark)为暗色模式指定合适的颜色。

悬停效果能够显著提升用户体验，但应保持设计一致性，仅在主要操作按钮上使用，避免装饰过度造成混乱。

相关模板