この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
リンクやボタンにマウスを乗せたとき、色がふわっと変わったり、カードが少し浮き上がったりする。あの動きがhover（ホバー）効果です。
ほんの少し動きがあるだけで、サイトの印象は驚くほど変わります。押せる場所が直感的に伝わるので、使いやすさも上がります。
この記事では、ボタン・カード・画像・テキストリンクのhover効果を全部で14種類集めました。すべてこのページの上でマウスを乗せて動きを確認できます。気に入ったものはCSSをそのままコピーして使ってください。
記事の後半では、スマホでhoverが効かない問題への対処法と、動きをカクつかせないためのコツもまとめています。
hover効果の基本はこれだけ
デザイン見本に入る前に、仕組みだけ手短に確認しておきます。ここを押さえておくと、あとから色や速さを自分好みに調整できます。
マウスが乗ったときのスタイルは、セレクタのうしろに :hover を付けて書きます。これだけでも色は変わりますが、パチッと切り替わるので少し唐突です。
そこでtransitionを通常時のスタイルに書き足します。変化に時間をかけることで、ふわっとなめらかに動くようになります。
ボタンにマウスを乗せてみてください
サンプルボタン.cw-basic {
display: inline-block;
padding: 14px 32px;
border-radius: 6px;
color: #fff;
background-color: #3b82c4;
text-decoration: none;
transition: background-color 0.3s ease;
}
.cw-basic:hover {
background-color: #2c6398;
}transitionの書き方は、変化させたいプロパティ、かかる時間、動き方の順です。0.3秒あたりが自然に見えて、いちばん使いやすい速さです。
ここから先の見本はすべて、この仕組みの応用でできています。
ボタンのhover効果 4種
いちばん出番が多いのがボタンです。押せることが伝わればいいので、動きは控えめなくらいがちょうどいいと思っています。
ボタンの形や色そのものを探している方は、CSSボタンデザイン見本集もあわせてどうぞ。
1. 色がふわっと濃くなる
もっとも定番で、どんなサイトにも合わせやすい動きです。迷ったらこれで問題ありません。
.cw-btn-fade {
display: inline-block;
padding: 14px 32px;
border-radius: 6px;
color: #fff;
background-color: #3b82c4;
text-decoration: none;
transition: background-color 0.3s ease;
}
.cw-btn-fade:hover {
background-color: #2c6398;
}<a class="cw-btn-fade" href="#">詳しく見る</a>2. ふわっと浮き上がる
少し上に動かして、同時に影を濃くします。ボタンが指に吸い付くような感覚が出ます。
.cw-btn-lift {
display: inline-block;
padding: 14px 32px;
border-radius: 6px;
color: #fff;
background-color: #f0885a;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cw-btn-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}transitionに2つのプロパティを指定するときは、カンマで区切って並べます。
3. 背景が左からスライドしてくる
枠線だけのボタンに色が流し込まれる動きです。少し凝って見えますが、疑似要素を1つ足すだけで作れます。
.cw-btn-slide {
position: relative;
display: inline-block;
padding: 14px 32px;
border: 2px solid #3b82c4;
border-radius: 6px;
color: #3b82c4;
background-color: #fff;
text-decoration: none;
overflow: hidden;
z-index: 0;
transition: color 0.3s ease;
}
.cw-btn-slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #3b82c4;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
.cw-btn-slide:hover {
color: #fff;
}
.cw-btn-slide:hover::before {
transform: scaleX(1);
}ポイントはtransform-originです。leftを指定すると左端を起点に伸びます。rightに変えれば右から、centerにすれば中央から広がります。
4. 光がシュッと走る
斜めの光がボタンの上を横切ります。申し込みボタンなど、いちばん目立たせたい場所に1つだけ使うのがおすすめです。
.cw-btn-shine {
position: relative;
display: inline-block;
padding: 14px 32px;
border-radius: 6px;
color: #fff;
background-color: #5b6bbf;
text-decoration: none;
overflow: hidden;
}
.cw-btn-shine::after {
content: "";
position: absolute;
top: -50%;
left: -60%;
width: 40%;
height: 200%;
background-color: rgba(255, 255, 255, 0.35);
transform: skewX(-25deg);
transition: left 0.5s ease;
}
.cw-btn-shine:hover::after {
left: 120%;
}光がボタンの外にはみ出さないよう、親側のoverflowにhiddenを付けるのを忘れないでください。
カードのhover効果 3種
記事一覧やサービス紹介で使うカードは、面積が大きいぶん動きがよく目立ちます。やりすぎるとうるさくなるので、変化は1つか2つに絞るのがコツです。
カード自体のデザインはCSSカードデザイン見本集でまとめています。
5. 浮き上がって影が深くなる
カードのhoverでいちばんよく見る形です。記事一覧に使えば、どのカードを見ているかがひと目でわかります。
.cw-card-lift {
display: block;
max-width: 320px;
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
color: #333;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cw-card-lift:hover {
transform: translateY(-6px);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.14);
}
.cw-card-lift__title {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.cw-card-lift__text {
display: block;
font-size: 14px;
color: #777;
}<a class="cw-card-lift" href="#">
<span class="cw-card-lift__title">カードのタイトル</span>
<span class="cw-card-lift__text">説明のテキストがここに入ります。</span>
</a>6. 下線が伸びて枠線の色が変わる
カードを動かさずに、色だけで反応を返すタイプです。カードを並べたときにレイアウトが揺れないので、落ち着いた印象になります。
.cw-card-line {
position: relative;
display: block;
max-width: 320px;
padding: 20px;
border: 1px solid #e2e2e2;
border-radius: 10px;
background-color: #fff;
color: #333;
text-decoration: none;
overflow: hidden;
transition: border-color 0.3s ease;
}
.cw-card-line::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background-color: #3b82c4;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.cw-card-line:hover {
border-color: #3b82c4;
}
.cw-card-line:hover::after {
transform: scaleX(1);
}7. 画像の上にテキストが浮かび上がる
画像カードの上に半透明の色を重ねて、説明を出します。実績紹介やギャラリーと相性がいい形です。
.cw-card-ov {
position: relative;
display: block;
max-width: 320px;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
}
.cw-card-ov img {
display: block;
width: 100%;
height: auto;
}
.cw-card-ov__cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
color: #fff;
background-color: rgba(30, 50, 80, 0.6);
opacity: 0;
transition: opacity 0.3s ease;
}
.cw-card-ov:hover .cw-card-ov__cover {
opacity: 1;
}<a class="cw-card-ov" href="#">
<img src="image.jpg" alt="サンプル画像">
<span class="cw-card-ov__cover">記事を読む</span>
</a>重ねる色を白（255,255,255,0.7）にして文字を濃い色にすると、やわらかい雰囲気になります。
画像のhover効果 3種
画像は動かす範囲が広いので、動きをゆっくりめにすると上品に見えます。目安として0.5秒前後がきれいです。
8. 枠の中でゆっくりズーム
画像だけが拡大して、枠は動きません。親要素にoverflow hiddenを付けることで、はみ出した部分が隠れます。
.cw-img-zoom {
display: block;
max-width: 320px;
border-radius: 10px;
overflow: hidden;
}
.cw-img-zoom img {
display: block;
width: 100%;
height: auto;
transition: transform 0.6s ease;
}
.cw-img-zoom:hover img {
transform: scale(1.1);
}9. モノクロからカラーに変わる
filterのgrayscaleを使います。写真をたくさん並べるページで、見ている1枚だけを際立たせたいときに便利です。
.cw-img-gray {
display: block;
max-width: 320px;
border-radius: 10px;
overflow: hidden;
}
.cw-img-gray img {
display: block;
width: 100%;
height: auto;
filter: grayscale(100%);
transition: filter 0.4s ease;
}
.cw-img-gray:hover img {
filter: grayscale(0);
}grayscaleの値を50%くらいにすると、うっすら色が残った状態からカラーに戻ります。
10. キャプションが下からスライドイン
画像の下に隠しておいた帯を、hoverでせり上げます。ふだんは画像をすっきり見せたいときに向いています。
.cw-img-cap {
position: relative;
display: block;
max-width: 320px;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
}
.cw-img-cap img {
display: block;
width: 100%;
height: auto;
}
.cw-img-cap__text {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 12px 16px;
color: #fff;
background-color: rgba(0, 0, 0, 0.55);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.cw-img-cap:hover .cw-img-cap__text {
transform: translateY(0);
}<a class="cw-img-cap" href="#">
<img src="image.jpg" alt="サンプル画像">
<span class="cw-img-cap__text">写真の説明が入ります</span>
</a>テキストリンクのhover効果 4種
本文の中のリンクは、目立たせすぎると読むリズムを邪魔します。読み進めるときに邪魔にならない程度の、軽い変化がちょうどいいです。
11. 下線が左から伸びる
下線をあらかじめ隠しておいて、hoverで左から伸ばします。text-decorationではなく疑似要素で線を作るのがポイントです。
.cw-link-line {
position: relative;
display: inline-block;
color: #3b82c4;
text-decoration: none;
}
.cw-link-line::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background-color: #3b82c4;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.cw-link-line:hover::after {
transform: scaleX(1);
}12. 蛍光マーカーが引かれる
背景のグラデーションを細い帯にして、その幅を広げています。手書きでマーカーを引いたような動きになります。
.cw-link-marker {
color: #333;
text-decoration: none;
background-image: linear-gradient(rgba(255, 222, 89, 0.8), rgba(255, 222, 89, 0.8));
background-repeat: no-repeat;
background-position: 0 88%;
background-size: 0 8px;
transition: background-size 0.4s ease;
}
.cw-link-marker:hover {
background-size: 100% 8px;
}background-sizeの2つ目の値がマーカーの太さです。文字サイズに合わせて6pxから10pxくらいで調整してください。
13. ほんのり背景がつく
文字色と背景を同時に変えます。目次やサイドバーのリンクなど、リストで並ぶ場所に向いています。
.cw-link-bg {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
color: #3b82c4;
text-decoration: none;
transition: color 0.3s ease, background-color 0.3s ease;
}
.cw-link-bg:hover {
color: #1f5b8f;
background-color: #eaf3fb;
}14. 矢印がスッと右に動く
疑似要素で矢印を出して、hoverで少しだけ右に動かします。「続きを読む」のような、次に進むリンクにぴったりです。
.cw-link-arrow {
color: #3b82c4;
text-decoration: none;
}
.cw-link-arrow::after {
content: "→";
display: inline-block;
margin-left: 4px;
transition: transform 0.3s ease;
}
.cw-link-arrow:hover::after {
transform: translateX(6px);
}矢印を動かすには、疑似要素にdisplayのinline-blockが必要です。これがないとtransformが効きません。
SANGOをお使いの方への注意です。SANGOは記事本文中のリンクに独自の色や下線を設定しているため、テキストリンク系のデザインは色が上書きされてしまうことがあります。反映されないときは、colorやtext-decorationの指定に !important を付けてみてください。
スマホでhoverが効かないときの対処法
ここが、hover効果でいちばんつまずきやすいところです。
スマホやタブレットにはマウスカーソルがありません。そのため、タップした瞬間にhoverのスタイルが適用され、指を離したあともその状態が残り続けることがあります。
ボタンが押されっぱなしのように見えたり、カードが浮いたまま戻らなかったり。あの引っかかる感じの正体はこれです。
解決策はシンプルで、hoverのスタイルをマウスが使える環境だけに限定します。
.cw-btn-lift {
display: inline-block;
padding: 14px 32px;
border-radius: 6px;
color: #fff;
background-color: #f0885a;
text-decoration: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
.cw-btn-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}
}hover: hover は「hoverができる環境かどうか」を判定するメディアクエリです。マウスやトラックパッドがある環境では中身が適用され、タッチ操作の端末では丸ごと無視されます。
この記事のCSSをそのまま使う場合も、hoverの部分だけをこのメディアクエリで囲むのがおすすめです。通常時のスタイルはメディアクエリの外に置いたままにしてください。
なお、タップしたときの反応が何もないと味気ないので、スマホ向けには :active（押している間だけのスタイル）を用意しておくと親切です。
なめらかに動かすためのコツ
同じ「浮き上がる」動きでも、書き方によってなめらかさが変わります。
ブラウザは、widthやheight、marginやtopなどを変えるたびに、レイアウトを計算し直します。周りの要素の位置まで再計算するので、負荷が大きくカクつきやすくなります。
いっぽうtransformとopacityは、レイアウトを計算し直さずに見た目だけを動かせます。この記事の見本で、移動や拡大にtransformを使っているのはそのためです。
- 上下左右に動かす → topやleftではなく transform: translate
- 大きくする → widthではなく transform: scale
- ふわっと出す・消す → display切り替えではなく opacity
- 変化の時間 → 0.2秒から0.4秒あたりが自然
もうひとつ、transitionにallを指定するのは避けたほうが無難です。変化する必要のないプロパティまで監視することになるので、対象は必要なものだけ書きましょう。
動きが苦手な方への配慮として、次の指定を追加しておくのもおすすめです。端末側でアニメーションを減らす設定にしている人には、動きが出なくなります。
@media (prefers-reduced-motion: reduce) {
.cw-btn-lift,
.cw-card-lift {
transition: none;
}
}WordPressに追加する手順
気に入ったデザインが見つかったら、CSSをWordPressに追加します。いちばん手軽なのは、外観→カスタマイズ→追加CSSに貼り付ける方法です。
そのうえで、記事の中でHTMLブロック（カスタムHTML）を使い、クラス名を付けたHTMLを書けば完成です。
追加CSS以外の方法や、それぞれのメリットとデメリットについてはWordPressにCSSを追加する方法でくわしくまとめています。テーマ更新でCSSが消えてしまわないか不安な方は、こちらもあわせて読んでみてください。
まとめ
hover効果は、CSSを数行足すだけでサイトの印象を大きく変えられる、コストパフォーマンスの高いカスタマイズです。
最後に、押さえておきたいポイントをまとめます。
- 基本は :hover と transition の組み合わせだけ
- 動かすときは transform と opacity を使うとなめらか
- スマホでの引っかかりは @media (hover: hover) で防げる
- 1ページの中で効果を盛りすぎない
まずは、いちばん押してほしいボタン1つから試してみてください。それだけでも、サイトの印象が変わったことに気づけるはずです。
ボタンやカードのデザインそのものを探している方は、CSSボタンデザイン見本集とCSSカードデザイン見本集もどうぞ。この記事のhover効果と組み合わせれば、そのまま使えるパーツができあがります。
