CSS

CSSホバーエフェクト実践パターン集 ― コピペで使える、現場で映える hover 表現8選

ボタン、カード、リンク、画像——「ちょっとした動き」を加えるだけで、UIの完成度は一段上がります。現場でそのまま使える8パターンを、仕組みから丁寧に解説します。

✍
NAOYA
2026.05.07 読了目安：10分

なぜ「ホバーエフェクト」が大事なのか

ボタンにカーソルを乗せたとき、何も反応がないUI——それだけで「このボタン、本当に押せるのかな？」とユーザーは一瞬不安になります。逆に、ほんの少し浮き上がったり、色が変わるだけで、「ここはクリックできる場所だ」というフィードバックを明確に返せます。

ホバーエフェクトの本質は「インタラクションのフィードバック」です。派手である必要はなく、適切な場所に適切な動きがあることが重要。だからこそ、「定番パターン」を手元に揃えておくことが、実務では効きます。

この記事では、現場で本当に使う頻度の高いホバーエフェクトを8つ厳選しました。すべてCSSだけで動作し、コードはそのままコピーして使えます。それぞれの「なぜこのプロパティを使うのか」「なぜこの値なのか」も解説していくので、応用が効くようになるはずです。

📌 前提知識
この記事で使う CSS の仕組みは、基本的に transition（値の変化をアニメーションさせるプロパティ）と transform（要素を変形・移動させるプロパティ）の2つです。この2つを組み合わせるだけで、ほとんどのホバーエフェクトは作れます。

Pattern 1：ボタン浮き上がり（Lift Effect）

最もよく使う、最もシンプルなボタンエフェクトです。hover 時に translateY で少し上に持ち上げ、同時に box-shadow を強くして「浮いている感」を演出します。たった2行の変化で、ボタンが生き生きとした存在感を持ちます。

ボタン浮き上がりエフェクト
.btn {
  padding: 14px 32px;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.35);
}
▶ Live Demo — ホバーしてみてください

ポイントは translateY(-3px) という小さな値。5px 以上上げると「飛びすぎ」に見えることが多いです。あくまで「ふわっ」とした印象を狙いましょう。box-shadow もブラー値（3番目の数値）を元の状態より大きくすることで、光源から離れた＝浮いている、という視覚的な手がかりになります。

Pattern 2：背景スライドイン（Slide Fill）

ゴーストボタン（背景が透明で、ボーダーだけのボタン）にぴったりのエフェクトです。hover 時に背景色が左からスライドして埋まり、文字色が白に変わります。::before 擬似要素を使うのがこのパターンの核心です。

背景スライドインエフェクト
.btn-slide {
  padding: 14px 32px;
  background: transparent;
  color: #7c3aed;
  border: 2px solid #7c3aed;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
  z-index: 1;
}
.btn-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;    /* 最初は左に隠れている */
  width: 100%;
  height: 100%;
  background: #7c3aed;
  transition: left 0.3s ease;
  z-index: -1;   /* テキストの後ろに配置 */
}
.btn-slide:hover {
  color: white;
}
.btn-slide:hover::before {
  left: 0;       /* スライドイン */
}
▶ Live Demo — ホバーで背景がスライド

overflow: hidden が必須です。これがないと、左に隠れているはずの ::before が見えてしまいます。z-index: -1 で背景をテキストの後ろに送ることで、文字が常に前面に表示されます。方向を変えたいなら、left: -100% を bottom: -100% に変えて下から上にスライドさせることも簡単にできます。

Pattern 3：カード浮上（Card Lift）

一覧ページのカードに使う、定番中の定番パターンです。Pattern 1のボタン浮き上がりと原理は同じですが、カードの場合は translateY の量を少し大きくし、box-shadow もよりソフトに広げると「紙がふわっと持ち上がった」印象になります。

カード浮上エフェクト
.card {
  background: white;
  border-radius: 12px;
  padding: 28px;
  border: 1px solid #e8e8e8;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
▶ Live Demo — カードにホバー
プロジェクト管理ツール

チームのタスクを一元管理。直感的なUIで、誰でもすぐに使い始められます。

💡 現場の経験則
カード一覧で複数のカードが並んでいる場合、浮き上がった1枚だけが目立つと「選択状態」のように見えて、意図せず情報の優劣を作ってしまいます。ホバー中のカードだけでなく、全体のバランスを確認しながら box-shadow の強さを決めましょう。

Pattern 4：画像ズーム（Image Zoom）

サムネイル画像にホバーした時に、少しズームインする表現です。ECサイトの商品一覧、ブログのアイキャッチ、ポートフォリオのギャラリーなど、画像がクリッカブルであることを示す場面で頻出します。

ポイントは、親要素に overflow: hidden を指定すること。これにより、拡大した画像がはみ出さず、枠の中で「覗き込む」ような自然なズームになります。

画像ズームエフェクト
.img-wrap {
  overflow: hidden;    /* はみ出しを隠す */
  border-radius: 12px;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.img-wrap:hover img {
  transform: scale(1.1);  /* 10%拡大 */
}
▶ Live Demo — 画像にホバーでズーム
SAMPLE IMAGE

transition の時間を 0.4s と少し長めにしているのは、画像のズームは「ゆったり」している方が上品に見えるからです。ボタンの浮き上がりは 0.2s でサッと反応させたいですが、画像はもう少しゆっくり。この「要素の種類に応じたタイミングの使い分け」は、現場で差が出るポイントです。

Pattern 5：下線アニメーション（Underline Slide）

テキストリンクのホバーエフェクトとして、下線が左から右に伸びるアニメーション。ナビゲーションのリンクや、本文中のテキストリンクに使えます。::after 擬似要素を使い、width: 0 → width: 100% で下線を「伸ばす」のが仕組みです。

下線アニメーション
.link {
  display: inline-block;
  position: relative;
  color: #1e293b;
  text-decoration: none;
  font-weight: 600;
}
.link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;          /* 最初は幅ゼロ */
  height: 2px;
  background: #7c3aed;
  transition: width 0.3s ease;
}
.link:hover::after {
  width: 100%;       /* ホバーで全幅に伸びる */
}
▶ Live Demo — リンクにホバーで下線が伸びる

下線を「中央から両端に」広げたいなら、left: 0 を left: 50% に変え、transform: translateX(-50%) を追加します。あるいは left と right の両方を 0 にして margin: 0 auto を使う方法もあります。バリエーションが出しやすいのがこのパターンの強みです。

Pattern 6・7・8：さらに使えるバリエーション

Pattern 6：アイコン回転

ボタン内のアイコンがホバーでくるっと回転するエフェクト。「＋」アイコンが「×」に見えるように45度回転させたり、矢印アイコンを90度回したりと応用範囲が広いです。

アイコン回転エフェクト
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s;
}
.icon-btn .icon {
  transition: transform 0.3s ease;
}
.icon-btn:hover .icon {
  transform: rotate(90deg);
}
▶ Live Demo — ホバーでアイコンが回転

Pattern 7：ボーダーグロー

ダークなボタンのボーダーが光るエフェクト。暗い背景のサイトやダークモードで特に映えます。border-color の変化と box-shadow の発光を組み合わせて「光る」印象を作ります。

ボーダーグローエフェクト
.glow-btn {
  padding: 14px 32px;
  background: #0e0e0e;
  color: white;
  border: 2px solid transparent;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.glow-btn:hover {
  border-color: #7c3aed;
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.4);
}
▶ Live Demo — ホバーでボーダーが光る

Pattern 8：オーバーレイ表示

カードや画像にホバーすると、半透明のオーバーレイが現れてテキストやアクションが表示されるパターン。ポートフォリオサイトのプロジェクト一覧や、ギャラリーの「詳細を見る」ボタン表示によく使われます。

オーバーレイ表示エフェクト
.card-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.card-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(124, 58, 237, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-overlay:hover::after {
  opacity: 1;
}
.card-overlay .hover-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-overlay:hover .hover-text {
  opacity: 1;
}
▶ Live Demo — ホバーでオーバーレイ＋テキスト表示
プロジェクトのサムネイル
詳細を見る →

ホバーエフェクトの設計原則

パフォーマンスを意識する

ブラウザが「安く」アニメーションできるプロパティは限られています。transform と opacity はGPUで処理されるため、どれだけ動かしてもレイアウトの再計算が発生しません。一方、width、height、margin、padding を transition で変化させると、周囲の要素の配置が再計算されるためパフォーマンスが落ちます。

❌ パフォーマンスが悪い書き方
.card:hover {
  margin-top: -6px;     /* レイアウト再計算が発生 */
  width: calc(100% + 10px); /* 周囲の要素にも影響 */
}
✅ パフォーマンスが良い書き方
.card:hover {
  transform: translateY(-6px);   /* GPU処理、高速 */
  box-shadow: 0 12px 32px rgba(0,0,0,0.1); /* レイアウトに影響しない */
}

モバイルでの配慮

スマートフォンには「ホバー」がありません。タッチデバイスでは :hover が tap 時に一瞬適用されるか、適用されたまま残ることがあり、意図しない表示になりがちです。対策として @media (hover: hover) メディアクエリで「ホバーが使えるデバイスだけに適用する」のがベストプラクティスです。

モバイル対策：hover メディアクエリ
/* ホバーが使えるデバイス（マウス）だけに適用 */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  }
}

アクセシビリティへの配慮

動きを減らしたいユーザーへの配慮として、prefers-reduced-motion メディアクエリも忘れずに。これを指定しておけば、OSの設定で「視差効果を減らす」をオンにしているユーザーに対して、アニメーションを無効化できます。

アクセシビリティ対応
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}
⚠️ 注意
ホバーエフェクトは「フィードバック」であって「情報」ではありません。ホバーしないと見えない重要な情報を隠してはいけません。オーバーレイパターンでテキストを表示する場合も、そのテキストが「補助的な情報」か「必須情報」かを判断し、必須ならホバーなしでも見える設計にしましょう。

まとめ

  • ホバーエフェクトの本質は「インタラクションのフィードバック」。派手さより適切さが大事
  • transform（translateY / scale / rotate）+ transition の組み合わせが基本。GPUで処理されるためパフォーマンスも良い
  • ::before / ::after 擬似要素を活用すると、背景スライドや下線アニメーションなど表現の幅が広がる
  • overflow: hidden は画像ズームや背景スライドの必須パートナー。はみ出しを制御することで「枠内で動く」自然な演出になる
  • box-shadow のブラー値を変化させることで「浮き上がり感」を演出できる。影は距離感のメタファー
  • @media (hover: hover) でタッチデバイスへの影響を防ぎ、prefers-reduced-motion でアクセシビリティにも配慮する
  • width や margin の transition は避け、transform と opacity を中心に組み立てるのがパフォーマンスの鉄則