CSSの「:hover」擬似クラスを使えば、マウスを乗せた時にボタンやリンクの色を変えることができます。この記事では、基本から実用的なパターンまで、初心者にも分かりやすく紹介します。
CSSの:hoverとは？
:hover はCSSで用意されている擬似クラスのひとつです。要素にマウスカーソルが乗ったときに、指定したスタイルに変化させることができます。
主な用途は、ボタンやリンクなどの視覚的なフィードバックに使われます。
背景色を変えるホバー効果
ボタンなどでよく使われる基本的なホバーエフェクトです。
.button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #45a049;
}
<button class="button">マウスを乗せてみてください</button>滑らかに色が変わるように transition を使っているのがポイントです。
テキストの色を変えるリンクデザイン
リンクの文字色を変える場合も同様に設定できます。
a.link {
color: #333;
text-decoration: none;
transition: color 0.3s;
}
a.link:hover {
color: #e91e63;
}
<a href="#" class="link">マウスを乗せて色が変わるリンク</a>ユーザーに「ここはクリックできる」と視覚的に伝えやすくなります。
カードに影と背景の変化を加える
Webサイトのデザインで人気の「カードUI」でもホバー効果はよく使われます。
.card {
background-color: #fff;
border: 1px solid #ddd;
padding: 20px;
transition: background-color 0.3s, box-shadow 0.3s;
}
.card:hover {
background-color: #f9f9f9;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
<div class="card">ここにマウスを乗せてみましょう</div>影や背景が変わることで、立体感やインタラクティブ性が強調されます。
まとめ
CSSの:hoverを活用すれば、ユーザーの操作に応じて動きのあるデザインが簡単に実現できます。
以下のポイントを押さえて実装しましょう。
transitionを使って滑らかに変化させる- 色や影だけでなくサイズ・グラデーションも応用可能
- ボタン、リンク、カードUIなど幅広く活用できる
小さな工夫でもWebサイト全体の印象は大きく変わります。ぜひ積極的に取り入れてみてください。
