ホバーエフェクトの作り方 — 5つの基本パターンと実装例
パターン1: カラー反転（最もシンプル）
背景色とテキスト色を入れ替える定番。CTA ボタン、ナビゲーションリンクで頻出。
.btn { background:#000; color:#fff; transition: all .3s; } .btn:hover { background:#fff; color:#000; border:1px solid #000; }
シンプルだが汎用性が高い。サイトの統一感を保ちつつ操作性を担保できる基本中の基本。
パターン2: スケール変化（ふくらむ）
ホバー時にサイズが微妙に大きくなる演出。商品カード・画像ギャラリーで効果的。
.card { transition: transform .3s cubic-bezier(.4,0,.2,1); } .card:hover { transform: scale(1.05); }
1.05〜1.15倍程度がちょうど良い。それ以上だとレイアウトを崩しがち。
パターン3: アンダーライン演出（リンク強調）
ホバー時に下線が左から右へ伸びる演出。テキストリンクで上品な印象を与える。
.link::after { content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:currentColor; transition: width .3s ease; } .link:hover::after { width:100%; }
詳細実装：Border Reveal ページを参照。
パターン4: マグネティック（マウス追従）
ボタンがマウスに引き寄せられる近未来的な演出。ブランドサイト・LPで強い印象を残す。
JavaScriptが必要。実装は Magnetic Hover ページにフルコード掲載。
使いすぎ注意。1ページに1〜2箇所程度に絞ると効果的。
パターン5: 3Dティルト
マウス位置に応じてカードが3Dで傾く演出。商品紹介・ポートフォリオで目を引く。
CSS transform: perspective(1000px) rotateX() rotateY() + JS でマウス位置を取得。
実装：Tilt 3D Hover ページを参照。
FAQ
モバイルではホバーが効かない
@media (hover: hover) {...} で出し分けるか、:active で代用します。ホバーで動きすぎると逆に使いにくい？
ホバー効果のtransition時間は？
cursor: pointer も忘れずに
cursor: pointer を指定すること。視覚＋形状の両方でクリック可能性を伝えます。関連書籍
学びを止めない · Amazonサブスク
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。