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

CSSテンプレート：ホバーで色が変わるボタン（:hover）

📝 使用用途

ユーザーがマウスカーソルをボタンに合わせたときに視覚的変化を与えるために使います。UXを高めるために頻繁に使われる基本的なCSS手法です。

📘 解説

: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="ja">
<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>
コピーしました！

🎨 ホバーエフェクトの実践的デザインテクニック

ボタンのホバーエフェクトは、ユーザーインタラクションを視覚的に伝える重要なUI要素です。:hover疑似クラスを使った色変化は、ユーザーに操作可能な要素であることを直感的に伝えます。

🌈 カラーデザインのバリエーション

基本の青(#007bff→#0056b3)だけでなく、サイトのカラーパレットに合わせて調整可能です。例えば、緑系なら#28a745→#218838、赤系なら#dc3545→#c82333などが適しています。コントラスト比4.5:1以上を保つことでアクセシビリティも向上します。

✨ インタラクションの高度化

transitionプロパティにall 0.3s easeを指定すると、色変化だけでなくサイズや影も滑らかに変化させられます。transform: scale(1.05)を加えると、ボタンが少し大きくなる効果でよりインタラクティブな印象に。ただし、過度なアニメーションは避け、0.3秒以内の変化が理想的です。

📱 レスポンシブ対応のポイント

タッチデバイスでは:hoverの代わりに:activeを併用すると良いでしょう。モバイルではパディングを少し大きく(12px 24px)し、タップターゲットを拡大します。ダークモード対応には@media (prefers-color-scheme: dark)で適切な色を設定します。

ホバーエフェクトはユーザー体験を向上させますが、サイト全体で一貫したデザインを保つことが重要です。主要な操作ボタンに限定して使用し、過度な装飾は控えめにしましょう。

関連テンプレート