ボタンのマウスオーバー(ホバー)アニメーションをCSS&HTMLで作る【コピペOK】
ボタンなどの要素にどのようなマウスオーバー（ホバー）の表現をつけるか悩むことも多いと思います。
そこでこの記事では、マウスオーバーの代表的な表現と、それを実装するためのCSSとHTML（コピペOK）を解説します。
あまり個性的なものだと実用性に欠けることもあるため、どのWebサイトにもそのまま入れやすいオーソドックスな表現を厳選してお届けします。
目次
マウスオーバー(ホバー)とは？
まずは簡単に言葉の意味を確認しておきましょう。
マウスオーバーとは、マウスカーソルが（リンクなどのクリック可能な）要素の上に乗ることです。マウスホバーも同じ意味と考えて差し支えありません。
通常、クリック可能な要素の上にカーソルが乗った時その要素のデザインが変わるように設定します。そうした「反応」を返すことで、それがクリック可能な要素だとユーザーが直感的にわかるようするためです。
また、マウスオーバーによって要素のデザインが変わることをロールオーバーと言います。
つまり用語の意味をまとめると下記のようになります。
- マウスオーバー（マウスホバー）
- マウスカーソルが（リンクなどのクリック可能な）要素の上に乗ること
- ロールオーバー
- マウスオーバーによって要素のデザインが変わること
マウスオーバーの表現では個性を出し過ぎない
マウスオーバーの表現（つまりロールオーバー）は、個性が強いものは避けた方がよいでしょう。なぜなら、マウスオーバーに効果をつける目的はあくまでもインタラクション、つまりカーソルが要素に乗ったこと対する反応をユーザーに返すことであって、見た目の個性よりも機能面の方が重要だからです。
もちろん、サイト全体で確固たるブランドイメージを表現している場合、マウスオーバーの表現もそれに応じて個性的になることはあり得ます。しかし、それはあくまでも少数の事例にのみ当てはまることであり、普通のサイトでマウスオーバーの表現だけが個性的だと浮いてしまいます。そのため、基本的にはスタンダードな表現を採用するのがおすすめです。
マウスオーバーのコーディングの基本は擬似クラス:hover
マウスオーバーを実装する時は:hoverという擬似クラスを使います。これをセレクタに設定するだけで、マウスオーバー時のスタイルを指定することができます。
例えば下記のように記述すれば、.btnというクラスがついた要素のホバー時の背景色を赤にすることができます。
.button:hover {
background-color: red;
}マウスオーバーのCSSアニメーション10選
具体的なマウスオーバーのアニメーション表現を見ていきます。扱う技術はHTMLとCSSだけです。まずは共通して使う部分を確認しておきましょう。
<a class="button" href="#">マウスオーバー</a>上記の#をリンク先のURLに、”マウスオーバー”をボタンに表示したい文言に変更してください。
このリンク要素を修飾するCSSはアニメーションによって異なるため、以下でそれぞれ解説していきます。
少し透明になる
マウスオーバーで少し透明になる表現です。
.button {
background-color: #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
transition: .3s;
}
.button:hover {
opacity: .9;
}色が変わる
マウスオーバーで色が変わる表現です。
.button {
background-color: #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
transition: .3s;
}
.button:hover {
background-color: #14AF65;
}色が反転する
マウスオーバーで色が反転する表現です。
.button {
background-color: #095DAD;
border: 3px solid #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
position: relative;
text-align: center;
text-decoration: none;
transition: .3s;
}
.button:hover {
background-color: #fff;
color: #095DAD;
}字間が広がる
マウスオーバーで字間が広がる表現です。
.button {
background-color: #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 1rem;
text-align: center;
text-decoration: none;
width: 260px;
transition: .3s;
}
.button:hover {
letter-spacing: .3rem;
}浮き上がる
マウスオーバーで浮き上がる表現です。
.button {
background-color: #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
transition: .3s;
}
.button:hover {
box-shadow: 0px 12px 24px #0b5dae63;
transform: translateY(-4px);
}沈む
マウスオーバーで沈む表現です。
.button {
background-color: #095DAD;
box-shadow: 0px 12px 24px #0b5dae63;
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
transition: .3s;
}
.button:hover {
box-shadow: unset;
transform: translateY(4px);
}押し込まれる
マウスオーバーで押し込まれる表現です。
.button {
background-color: #095DAD;
box-shadow: 0px 5px 1px #03386d;
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
transition: .3s;
}
.button:hover {
box-shadow: unset;
transform: translateY(4px);
}グラデーションが単色になる
マウスオーバーでグラデーションが単色になる表現です。
.button {
background: linear-gradient(110.85deg, #095DAD 0%, #11af75 100.19%);
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
}
.button:hover {
background: #095DAD;
}単色がグラデーションになる
マウスオーバーで単色がグラデーションになる表現です。
.button {
background: #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
}
.button:hover {
background: linear-gradient(110.85deg, #095DAD 0%, #11af75 100.19%);
}下線が引かれる
マウスオーバーで下線が引かれる表現です。
.button {
background-color: #095DAD;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
color: #fff;
display: inline-block;
font-weight: 700;
padding: 1.25rem 4rem;
text-decoration: none;
}
.button:hover {
text-decoration: underline;
text-underline-offset: 4px;
}ボタンのマウスオーバーの表現をCSS&HTMLで作る：まとめ
マウスオーバーの表現について、実用性の高いものを厳選して解説しました。インタラクションをしっかり設定することでユーザーがサイトの仕様を理解しやすくなるため、ぜひご活用ください。