CSSの :hover を使うと、マウスを乗せたときの見た目を変えられます。
この記事では、ボタン、画像、テキスト、カード、ナビに使いやすいホバーエフェクトを20種類紹介します。
スマホではhoverが期待通りに見えないこともあるため、重要な情報はhover前でも読めるようにしておくのが基本です。
hoverを書くときの基本
:hover は、要素にマウスが乗ったときの状態を指定する疑似クラスです。
.sample-link:hover {
color: #2563eb;
}なめらかに変化させたい場合は、hover側ではなく通常時に transition を指定します。
.sample-link {
transition: color 0.3s ease;
}1. 色が変わるボタン
一番使いやすいhoverです。
<a href="#" class="hover-color-button">詳しく見る</a>.hover-color-button {
display: inline-block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
background: #2563eb;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.hover-color-button:hover {
background: #1d4ed8;
}2. ふわっと浮くボタン
少し上に動かして、クリックできる印象を出します。
.hover-float-button {
display: inline-block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
background: #7c3aed;
border-radius: 6px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-float-button:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(124, 58, 237, 0.25);
}3. 少し拡大するボタン
CTAを少し目立たせたいときに使えます。
.hover-scale-button {
display: inline-block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
background: #16a34a;
border-radius: 9999px;
transition: transform 0.25s ease;
}
.hover-scale-button:hover {
transform: scale(1.04);
}拡大しすぎると周囲の要素とぶつかるため、1.03 から 1.06 程度にします。
4. 枠線ボタンの背景が変わるhover
枠線ボタンをhover時だけ塗りボタンにします。
.hover-outline-fill {
display: inline-block;
padding: 12px 24px;
color: #2563eb;
text-decoration: none;
border: 2px solid #2563eb;
border-radius: 6px;
transition: color 0.3s ease, background-color 0.3s ease;
}
.hover-outline-fill:hover {
color: #fff;
background: #2563eb;
}5. 下線が左から伸びるリンク
ナビゲーションやテキストリンクに使いやすいhoverです。
<a href="#" class="hover-underline-left">リンクテキスト</a>.hover-underline-left {
position: relative;
color: #111827;
text-decoration: none;
}
.hover-underline-left::after {
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
content: "";
background: #2563eb;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.hover-underline-left:hover::after {
transform: scaleX(1);
}6. 下線が中央から広がるリンク
少し上品に見せたいナビに向いています。
.hover-underline-center {
position: relative;
color: #111827;
text-decoration: none;
}
.hover-underline-center::after {
position: absolute;
left: 50%;
bottom: -4px;
width: 100%;
height: 2px;
content: "";
background: #db2777;
transform: translateX(-50%) scaleX(0);
transition: transform 0.3s ease;
}
.hover-underline-center:hover::after {
transform: translateX(-50%) scaleX(1);
}7. 画像がズームするhover
カード画像やギャラリーでよく使います。
<a href="#" class="hover-image-zoom">
<img src="sample.jpg" alt="サンプル画像">
</a>.hover-image-zoom {
display: block;
overflow: hidden;
border-radius: 8px;
}
.hover-image-zoom img {
display: block;
width: 100%;
height: auto;
transition: transform 0.4s ease;
}
.hover-image-zoom:hover img {
transform: scale(1.08);
}親要素に overflow: hidden; を指定すると、拡大した画像が外にはみ出しません。
8. 画像が暗くなるhover
画像リンクに「押せる」印象を足したいときに使えます。
.hover-image-dark {
display: block;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.hover-image-dark img {
display: block;
width: 100%;
transition: opacity 0.3s ease;
}
.hover-image-dark:hover img {
opacity: 0.72;
}9. 白黒画像がカラーになるhover
実績一覧やプロフィール画像で使える表現です。
.hover-grayscale img {
filter: grayscale(100%);
transition: filter 0.35s ease;
}
.hover-grayscale:hover img {
filter: grayscale(0);
}重要な画像を常に白黒にすると伝わりにくいこともあるので、装飾的な場面に向いています。
10. 画像にキャプションが出るhover
ギャラリーや制作実績に使いやすい形です。
<a href="#" class="hover-caption">
<img src="sample.jpg" alt="制作実績の画像">
<span>詳しく見る</span>
</a>.hover-caption {
position: relative;
display: block;
overflow: hidden;
border-radius: 8px;
}
.hover-caption img {
display: block;
width: 100%;
}
.hover-caption span {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
font-weight: 700;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.hover-caption:hover span {
opacity: 1;
}hoverしなくても必要な情報が伝わるよう、画像の alt や周辺テキストも整えます。
11. カードが浮くhover
カード一覧で定番のhoverです。
.hover-card-lift {
padding: 24px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-card-lift:hover {
transform: translateY(-6px);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}カードデザインの基本は、CSSカードデザイン集 で扱います。
12. カードの枠線色が変わるhover
動きは控えめにして、選択できる印象を出す表現です。
.hover-card-border {
padding: 24px;
background: #fff;
border: 2px solid #e5e7eb;
border-radius: 8px;
transition: border-color 0.3s ease;
}
.hover-card-border:hover {
border-color: #2563eb;
}13. テキスト色が変わるhover
本文リンクやメニューに使いやすい基本形です。
.hover-text-color {
color: #374151;
text-decoration: none;
transition: color 0.3s ease;
}
.hover-text-color:hover {
color: #2563eb;
}14. アイコンだけ動くhover
テキストはそのまま、矢印だけ動かすリンクです。
<a href="#" class="hover-icon-slide">
詳しく見る
<span aria-hidden="true">→</span>
</a>.hover-icon-slide {
display: inline-flex;
align-items: center;
gap: 8px;
color: #2563eb;
font-weight: 700;
text-decoration: none;
}
.hover-icon-slide span {
transition: transform 0.3s ease;
}
.hover-icon-slide:hover span {
transform: translateX(5px);
}15. 背景が左から広がるhover
ボタンやナビリンクに使える、少し動きのある表現です。
.hover-bg-slide {
position: relative;
display: inline-block;
padding: 10px 18px;
overflow: hidden;
color: #2563eb;
text-decoration: none;
border: 1px solid #2563eb;
border-radius: 6px;
}
.hover-bg-slide::before {
position: absolute;
inset: 0;
z-index: -1;
content: "";
background: #2563eb;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.hover-bg-slide:hover {
color: #fff;
}
.hover-bg-slide:hover::before {
transform: scaleX(1);
}z-index が効かない場合は、z-indexが効かない原因 を確認してください。
16. グラデーションが動くhover
キャンペーンボタンや目立たせたいリンクに使えます。
.hover-gradient {
display: inline-block;
padding: 12px 28px;
color: #fff;
font-weight: 700;
text-decoration: none;
background: linear-gradient(90deg, #2563eb, #db2777, #2563eb);
background-size: 200% 100%;
border-radius: 9999px;
transition: background-position 0.4s ease;
}
.hover-gradient:hover {
background-position: 100% 0;
}17. 透明度が変わるhover
控えめな変化にしたい場合に使います。
.hover-opacity {
display: inline-block;
transition: opacity 0.3s ease;
}
.hover-opacity:hover {
opacity: 0.7;
}画像、アイコン、ボタンなど幅広く使えます。
18. アイコンが回転するhover
開閉や更新を連想させたいときに使える表現です。
<button class="hover-rotate-icon">
更新
<span aria-hidden="true">↻</span>
</button>.hover-rotate-icon {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
font: inherit;
cursor: pointer;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 6px;
}
.hover-rotate-icon span {
transition: transform 0.3s ease;
}
.hover-rotate-icon:hover span {
transform: rotate(180deg);
}19. フォーカスにも対応したhover
キーボード操作でも同じ見た目になるように、:focus-visible も指定します。
.hover-focus-button {
display: inline-block;
padding: 12px 24px;
color: #fff;
text-decoration: none;
background: #111827;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.hover-focus-button:hover,
.hover-focus-button:focus-visible {
background: #374151;
outline: 3px solid rgba(17, 24, 39, 0.25);
outline-offset: 3px;
}hoverだけでなく、キーボード操作にも配慮できます。
20. 動きを減らす設定に対応するhover
動きが苦手なユーザー向けに、prefers-reduced-motion でtransitionを抑えます。
@media (prefers-reduced-motion: reduce) {
.hover-float-button,
.hover-scale-button,
.hover-image-zoom img,
.hover-card-lift,
.hover-icon-slide span,
.hover-gradient {
transition: none;
}
}すべてのhoverに必須ではありませんが、動きの大きい表現を使うときは入れておくと安心です。
hoverで変更しやすいCSS
hoverでよく変えるCSSは次のとおりです。
| やりたいこと | 使うCSS |
|---|---|
| 色を変える | color、background-color |
| 動かす | transform: translate() |
| 大きくする | transform: scale() |
| 暗くする | opacity、半透明背景 |
| なめらかにする | transition |
hoverでよくある失敗
transitionをhover側だけに書いている- スマホでhover前提の情報を隠している
- 画像ズーム時に
overflow: hidden;がなく、画像がはみ出している - 疑似要素を使った背景が文字の上に重なっている
- 動きが大きすぎて読みにくい
- キーボード操作の
:focus-visibleを考慮していない
CSSが効かない場合は、CSSが効かない原因まとめ も確認してください。
まとめ
hoverエフェクトは、通常時に transition を書き、hover時に色、透明度、影、transform を変えると作りやすいです。
ボタンそのもののデザインは CSSボタンデザイン集、ボタン専用の動きは CSSアニメーション付きボタン集 に分けて管理します。