css-hover-effects

CSS ホバーエフェクト

あらゆる Web ページで使える、依存関係ゼロで SSR に安全なホバーエフェクトのパターンです。 既存のデザインスタイルに合うエフェクトを自動で選びます。

---

ステップ 1 — デザインスタイルを判定する

エフェクトを選ぶ前に、既存の CSS を読み、デザインを分類します。 以下のシグナルを上から順に確認してください。

シグナルのチェックリスト

border-radius
  0–3px      → SHARP (corporate, enterprise)
  4–8px      → STANDARD (SaaS, neutral)
  12px+      → ROUNDED (consumer, friendly)

color saturation (look at primary/accent colors)
  muted, low-saturation (HSL s < 40%)  → MINIMAL
  moderate (40–70%)                    → STANDARD
  vivid, high-saturation (> 70%)       → BOLD

existing transitions
  none                → conservative, start subtle
  transition: all     → open to most effects
  specific property   → match their approach

spacing & density
  large padding/gaps  → marketing / hero page → bolder effects OK
  tight layout        → dashboard / app → subtle only

shadow usage
  no box-shadow       → FLAT design → avoid float-shadow
  has box-shadow      → ELEVATED → float-shadow fits
  
font style
  serif               → editorial / formal → no bouncy effects
  display / heavy     → bold brand → strong effects OK
  system-ui / sans    → neutral → match by other signals

スタイルの分類

シグナルを確認した後、カテゴリを 1 つ選びます。

スタイル	シグナル	例
MINIMAL	控えめな色 + 大きな角丸 + シャドウなし + システムフォント	Notion、Linear、Vercel
BOLD	鮮やかな色 + 任意の角丸 + 強いシャドウ + ディスプレイフォント	Stripe、クリエイティブエージェンシー
PLAYFUL	鮮やかな色 + 大きな角丸 + 遊び心のあるフォント + カラフルなパレット	Duolingo、コンシューマー向けアプリ
CORPORATE	控えめな色／ネイビー系の色 + 小さな角丸 + 高い密度 + 装飾なし	B2B SaaS、ダッシュボード
DARK-PREMIUM	暗い背景 + グローのアクセント + 中程度の角丸	Raycast、Linear のダークテーマ、開発者向けツール

---

ステップ 2 — マトリックスからエフェクトを選ぶ

エフェクト × スタイルの互換性マトリックス

エフェクト	MINIMAL	BOLD	PLAYFUL	CORPORATE	DARK-PREMIUM
フロート	✅	✅	✅	✅	✅
フロートシャドウ	❌（フラット）	✅	✅	❌	✅
グロー	❌	✅	✅	❌	✅ ★ 最適
中央からの下線	✅ ★ 最適	✅	✅	✅	✅
右方向へのスイープ	❌（派手すぎる）	✅	✅	❌	❌
拡大	✅	✅	✅	✅	✅
パルス拡大	❌	✅	✅	❌	❌
ポップ	❌	✅	✅ ★ 最適	❌	❌
ぐらつき	❌	✅	✅	❌	❌
バズ	❌	✅	✅	❌	❌
背景フェード	✅ ★ 最適	✅	✅	✅ ★ 最適	✅
水平シャッターイン	❌	✅ ★ 最適	✅	❌	✅
ボーダーフェード	✅	✅	✅	✅	✅
リップルアウト	❌	✅	✅	❌	✅
ラジアルシャドウ	❌	✅	❌	❌	✅ ★ 最適
カール	❌	✅	✅	❌	❌
バブル（ツールチップ）	✅	✅	✅	✅	✅

ルール:

• MINIMAL: 1 ページあたり最大 2 つのエフェクトにし、duration ≤ 250ms を維持します
• CORPORATE: 背景フェード、下線、ボーダー、控えめなフロートのみ。それ以外は使いません
• DARK-PREMIUM: 動きよりもグローとラジアルシャドウを優先します
• PLAYFUL: 2 つのエフェクトを組み合わせます（例: ポップ + 背景色の変更）
• 1 ページ内に 3 回を超えて表示される要素には、ぐらつき／バズを使わないでください

---

ステップ 3 — エフェクトライブラリ（コピーして使える CSS）

既存のパレットに合わせるには、CSS カスタムプロパティを使います。 var(--accent) をプロジェクトで実際に使われているアクセントカラーに置き換えてください。

---

カテゴリ: 2D トランジション

フロート

要素を上方向に持ち上げます。汎用的で、どのスタイルにも使えます。

.hvr-float {
  --duration: 0.3s;
  transition: transform var(--duration) ease;
}
.hvr-float:hover {
  transform: translateY(-6px);
}

MINIMAL では translateY(-4px) を使います。BOLD／PLAYFUL では translateY(-8px) を使います。

---

フロートシャドウ

フロート + それに合ったシャドウです。デザインにすでにシャドウがある場合のみ使ってください。

.hvr-float-shadow {
  --duration: 0.3s;
  --shadow-color: rgba(0, 0, 0, 0.12);
  transition: transform var(--duration) ease,
              box-shadow var(--duration) ease;
}
.hvr-float-shadow:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px var(--shadow-color);
}

ヒント: --shadow-color にアクセントカラーを色付けした色を設定すると、より豊かな印象になります。

---

拡大

控えめに拡大します。どの要素にも安全に使え、カードや画像に適しています。

.hvr-grow {
  transition: transform 0.2s ease;
}
.hvr-grow:hover {
  transform: scale(1.05);
}

---

縮小

縮小して、「押せる」ことを示します。アイコンボタンに適しています。

.hvr-shrink {
  transition: transform 0.2s ease;
}
.hvr-shrink:hover {
  transform: scale(0.94);
}

---

ポップ

弾性のあるオーバーシュートを伴う、バネのような拡大です。PLAYFUL と BOLD のみで使います。

.hvr-pop {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hvr-pop:hover {
  transform: scale(1.15);
}

---

パルス拡大

脈打つように拡大するアニメーションです。単一の CTA に注目を集めます。 控えめに使い、1 ページあたり最大 1 要素にしてください。

.hvr-pulse-grow {
  animation: hvr-pulse-grow 0.4s linear infinite alternate;
}
@keyframes hvr-pulse-grow {
  to { transform: scale(1.06); }
}

---

水平方向のぐらつき

左右に揺れる、遊び心のある動きです。タグ、バッジ、楽しい UI のみに使います。

.hvr-wobble-horizontal:hover {
  animation: hvr-wobble-h 0.8s ease both;
}
@keyframes hvr-wobble-h {
  16.65% { transform: translateX(6px); }
  33.3%  { transform: translateX(-5px); }
  49.95% { transform: translateX(4px); }
  66.6%  { transform: translateX(-2px); }
  83.25% { transform: translateX(1px); }
  100%   { transform: translateX(0); }
}

---

バズ

すばやく振動します。アラート、エラー状態、通知アイコンのみに使います。

.hvr-buzz:hover {
  animation: hvr-buzz 0.15s linear infinite;
}
@keyframes hvr-buzz {
  50% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(-2px) rotate(-1deg); }
}

---

ボブ

上下にゆっくり浮遊するアニメーションです。常時動作し、ホバーでは開始しません。 装飾的なヒーロー要素やロゴマークに使います。

.hvr-bob {
  animation: hvr-bob 1.5s ease infinite;
}
@keyframes hvr-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

---

カテゴリ: 背景トランジション

背景フェード

ホバー時に色を重ねます。最も安全な背景エフェクトで、どこでも使えます。

.hvr-bg-fade {
  --bg-hover: rgba(99, 102, 241, 0.08); /* use accent at 8% opacity */
  transition: background-color 0.25s ease;
}
.hvr-bg-fade:hover {
  background-color: var(--bg-hover);
}

CORPORATE のデフォルトです。テーブル行、メニュー項目、リスト項目に使います。

---

右方向へのスイープ

左から単色が広がります。派手なため、BOLD と PLAYFUL のみで使います。

.hvr-sweep-right {
  --sweep-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hvr-sweep-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sweep-color);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: -1;
}
.hvr-sweep-right:hover::before { transform: scaleX(1); }
.hvr-sweep-right:hover { color: white; }

---

水平シャッターイン

中央から左右に開くシャッターです。インパクトの強い CTA ボタンに適しています。

.hvr-shutter-in-h {
  --shutter-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.35s ease;
}
.hvr-shutter-in-h::before,
.hvr-shutter-in-h::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: var(--shutter-color);
  transition: transform 0.35s ease;
  z-index: -1;
}
.hvr-shutter-in-h::before { left: 0; transform: scaleX(0); transform-origin: left; }
.hvr-shutter-in-h::after  { right: 0; transform: scaleX(0); transform-origin: right; }
.hvr-shutter-in-h:hover::before,
.hvr-shutter-in-h:hover::after { transform: scaleX(1); }
.hvr-shutter-in-h:hover { color: white; }

---

ラジアルアウト

円形の波紋が中央から広がります。画像サムネイルやアバターに使います。

.hvr-radial-out {
  --radial-color: var(--accent, #6366f1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}
.hvr-radial-out::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--radial-color);
  transform: scale(0);
  transition: transform 0.4s ease;
  z-index: -1;
}
.hvr-radial-out:hover::before { transform: scale(2.5); border-radius: 0; }
.hvr-radial-out:hover { color: white; }

---

カテゴリ：ボーダーのトランジション

中央からのアンダーライン

テキストの下で、線が中央から外側へ伸びます。ナビゲーションリンクに幅広く使えます。

.hvr-underline-center {
  --line-color: var(--accent, #6366f1);
  --line-height: 2px;
  position: relative;
}
.hvr-underline-center::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%; right: 50%;
  height: var(--line-height);
  background: var(--line-color);
  transition: left 0.25s ease, right 0.25s ease;
}
.hvr-underline-center:hover::after { left: 0; right: 0; }

---

左からのアンダーライン

線が左からスライドして表示されます。中央からのバージョンより方向性が強い表現です。

.hvr-underline-left {
  --line-color: var(--accent, #6366f1);
  position: relative;
}
.hvr-underline-left::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 100%;
  height: 2px;
  background: var(--line-color);
  transition: right 0.25s ease;
}
.hvr-underline-left:hover::after { right: 0; }

---

ボーダーフェード

ホバー時に細いボーダーが表示されます。カード、パネル、画像コンテナーに適しています。

.hvr-border-fade {
  --border-color: var(--accent, #6366f1);
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}
.hvr-border-fade:hover {
  border-color: var(--border-color);
}

---

リップルアウト

ボーダーの波紋が外側へ広がります。円形ボタンやアイコンボタンに適しています。

.hvr-ripple-out {
  --ripple-color: var(--accent, #6366f1);
  position: relative;
}
.hvr-ripple-out::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--ripple-color);
  border-radius: inherit;
  opacity: 0;
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hvr-ripple-out:hover::before {
  transform: scale(1.12);
  opacity: 1;
}

---

リビール（アンダーラインの表示）

色付きのバーがテキストの下から現れるように見えます。強調リンクに適しています。

.hvr-reveal {
  --reveal-color: var(--accent, #6366f1);
  position: relative;
  overflow: hidden;
}
.hvr-reveal::after {
  content: '';
  position: absolute;
  bottom: 0; left: -100%;
  width: 100%; height: 2px;
  background: var(--reveal-color);
  transition: left 0.3s ease;
}
.hvr-reveal:hover::after { left: 0; }

---

カテゴリ：シャドウとグロー

グロー

ホバー時に色付きのグローが表示されます。DARK-PREMIUM スタイルを象徴するエフェクトです。

.hvr-glow {
  --glow-color: rgba(99, 102, 241, 0.5); /* use accent at 50% opacity */
  transition: box-shadow 0.3s ease;
}
.hvr-glow:hover {
  box-shadow: 0 0 18px var(--glow-color);
}

暗い背景では不透明度を 0.7 に上げます。明るい背景では 0.3 にします。

---

シャドウ

ホバー時に方向性のあるシャドウが表示されます。白い背景上のカードに適しています。

.hvr-shadow {
  transition: box-shadow 0.3s ease;
}
.hvr-shadow:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

---

放射状シャドウ

内向きの放射状シャドウで、ドラマチックなフォーカス効果を生み出します。DARK-PREMIUM 専用です。

.hvr-shadow-radial {
  --glow: rgba(99, 102, 241, 0.35);
  transition: box-shadow 0.4s ease;
}
.hvr-shadow-radial:hover {
  box-shadow: 0 0 0 4px var(--glow), 0 0 40px var(--glow);
}

---

カテゴリ：アイコン（テキスト付き）

ボタンやナビゲーション項目にテキストとアイコンの両方が含まれる場合に使用します。

アイコンフォワード

ホバー時にアイコンが右へスライドします。→ 矢印付きのナビゲーション項目に適しています。

.hvr-icon-forward .icon {
  transform: translateX(0);
  transition: transform 0.2s ease;
}
.hvr-icon-forward:hover .icon {
  transform: translateX(4px);
}

---

アイコンフロート

アイコンが上に浮かび上がります。ツールバーやサイドバーのアイコンボタンに適しています。

.hvr-icon-float .icon {
  transition: transform 0.3s ease;
}
.hvr-icon-float:hover .icon {
  transform: translateY(-4px);
}

---

アイコンスピン

ホバー時にアイコンが回転します。更新、設定、読み込みアイコンに適しています。

.hvr-icon-spin .icon {
  transition: transform 0.3s ease;
}
.hvr-icon-spin:hover .icon {
  transform: rotate(90deg);
}

---

アイコングロウ

テキストはそのままに、アイコンが拡大します。

.hvr-icon-grow .icon {
  transition: transform 0.2s ease;
}
.hvr-icon-grow:hover .icon {
  transform: scale(1.3);
}

---

カテゴリ：吹き出し（ツールチップ）

ホバーで表示されるツールチップ風のコールアウトが必要な場合に使用します。

上向きバブル

ホバー時に要素の上にツールチップが表示されます。

.hvr-bubble-top {
  position: relative;
}
.hvr-bubble-top::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #1a1a2e;
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hvr-bubble-top::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  border: 5px solid transparent;
  border-top-color: #1a1a2e;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hvr-bubble-top:hover::before,
.hvr-bubble-top:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

使用例：<button class="hvr-bubble-top" data-tooltip="Click to save">Save</button>

---

カテゴリ：カール

右下カール

右下隅にページがめくれる効果を加えます。クリエイティブ系やポートフォリオのサイトに適しています。

.hvr-curl-bottom-right {
  position: relative;
  overflow: hidden;
}
.hvr-curl-bottom-right::before {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  background: linear-gradient(
    225deg,
    #fff 45%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.03) 56%, transparent 80%
  );
  transition: width 0.3s ease, height 0.3s ease;
  box-shadow: -1px -1px 4px rgba(0,0,0,0.1);
}
.hvr-curl-bottom-right:hover::before {
  width: 40px;
  height: 40px;
}

---

ステップ 4 — 組み合わせのルール

安全な組み合わせ（同じ要素に併用）

• フロート + ボーダーフェード
• フロートシャドウ + グロウ（グロウは控えめにし、最大 1.03 にする）
• 中央からのアンダーライン + :hover での色のトランジション
• 背景フェード + アイコンフォワード
• グロー + 放射状シャドウ（DARK-PREMIUM 専用）

組み合わせ禁止

• スイープ + フロート（互いに注意を引こうとします）
• ウォブル + バズ（混沌としすぎます）
• パルスグロウ + 他のアニメーション（発作のリスクがあります）
• カール + 背景のトランジション（視覚的に競合します）

持続時間のガイドライン

MINIMAL style:     150–200ms  ease
CORPORATE style:   200–250ms  ease
STANDARD style:    200–300ms  ease
BOLD style:        250–350ms  ease
PLAYFUL style:     200–350ms  cubic-bezier(0.34, 1.56, 0.64, 1)

アクセシビリティ

常に prefers-reduced-motion を尊重してください。

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

ホバーエフェクトを適用する際は、このブロックをグローバルスタイルシートに一度追加してください。

---

ステップ 5 — 適用チェックリスト

コードを出力する前に、次の項目を確認してください。

• デザインスタイルを特定し、その選択理由を説明した
• エフェクトを選ぶ前に互換性マトリックスを確認した
• 既存のパレットに紐づく CSS カスタムプロパティを使用した
• prefers-reduced-motion ブロックを適用した
• 1 要素あたりのアニメーションタイプのエフェクトは最大 1 つ（重ね掛けなし）
• パルスグロウの使用はページあたり 1 要素以下
• ウォブル／バズの使用はページあたり 3 要素以下
• position: relative と overflow: hidden の前提条件をすべて満たしている

---

クイックリファレンス — 要素タイプ別エフェクト

要素	MINIMAL	BOLD	PLAYFUL	CORPORATE	DARK-PREMIUM
ナビゲーションリンク	中央からのアンダーライン	右へのスイープ	ポップ + 色	背景フェード	アンダーライン + グロー
プライマリボタン	グロウ + ボーダーフェード	内向きシャッター	ポップ	背景フェード	グロー
セカンダリボタン	ボーダーフェード	右へのスイープ	ウォブル	ボーダーフェード	ボーダー + グロー
カード	フロート	フロートシャドウ	ポップ + シャドウ	背景フェード	グロー
アイコンボタン	アイコンフロート	アイコンスピン	アイコングロウ	アイコンフォワード	アイコンフロート + グロー
タグ／バッジ	グロウ	ポップ	ポップ + 色	背景フェード	グロウ
画像	グロウ	フロートシャドウ	フロート	グロウ	グロー
テーブル行	背景フェード	背景フェード	背景フェード	背景フェード	背景フェード
ツールチップのトリガー	上向きバブル	上向きバブル	上向きバブル	上向きバブル	上向きバブル