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