ボタンのマウスオーバー(ホバー)アニメーションを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: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		  transition: 1s;
		}
		.btn:hover {
		  opacity: .8;
		}
		
		

色が変わる

マウスオーバーで色が変わる表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		  transition: 1s;
		}
		.btn:hover {
		  background-color: #F77070
		}
		
		

色が反転する

マウスオーバーで色が反転する表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  height: 79px;
		  letter-spacing: .1rem;
		  line-height: 79px;
		  text-align: center;
		  text-decoration: none;
		  width: 240px;
		}
		.btn:hover {
		  background-color: #fff;
		  border: 3px solid #7080f7;
		  color: #7080f7;
		  line-height: 73px;
		}
		
		

字間が広がる

マウスオーバーで字間が広がる表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
                  text-align: center;
		  text-decoration: none;
                  transition: .4s;
                  width: 160px;
		}
		.btn:hover {
		  letter-spacing: .3rem;
		}
		
		

浮き上がる

マウスオーバーで浮き上がる表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		  transition: .4s;
		}
		.btn:hover {
		  box-shadow: 0px 0px 14px rgba(0,0,0,.3);
     	          transform: translateY(4px);
		}
		
		

沈む

マウスオーバーで沈む表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0px 0px 14px rgba(0,0,0,.3);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		  transition: .4s;
		}
		.btn:hover {
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
     	          transform: translateY(4px);
		}
		
		

押し込まれる

マウスオーバーで押し込まれる表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-bottom: 4px solid #3648C9;
		  border-radius: 3rem;
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		}
		.btn:hover {
		  border-bottom: 0;
                  transform: translateY(4px);
		}
		
		

グラデーションが単色になる

マウスオーバーでグラデーションが単色になる表現です。

マウスオーバー

		
		.btn {
		  background: linear-gradient(110.85deg, #7080F7 0%, #4BA2D2 100.19%);
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		}
		.btn:hover {
                  background: #7080F7;
		}
		
		

単色がグラデーションになる

マウスオーバーで単色がグラデーションになる表現です。

マウスオーバー

		
		.btn {
                  background: #7080F7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		}
		.btn:hover {
		  background: linear-gradient(110.85deg, #7080F7 0%, #4BA2D2 100.19%);
		}
		
		

下線が引かれる

マウスオーバーで下線が引かれる表現です。

マウスオーバー

		
		.btn {
		  background-color: #7080f7;
		  border-radius: 3rem;
		  box-shadow: 0 1px 4px rgba(0,0,0,.2);
		  color: #fff;
		  display: inline-block;
		  font-size: 1.125rem;
		  font-weight: 700;
		  letter-spacing: .1rem;
		  padding: 1.25rem 4rem;
		  text-decoration: none;
		}
		.btn:hover {
		  text-decoration: underline;
		}
		
		

ボタンのマウスオーバー(マウスホバー)の表現をCSS&HTMLで作る:まとめ

マウスオーバー(マウスホバー)の表現について、実用性の高いものを厳選して解説しました。インタラクションをしっかり設定することでユーザーがサイトの仕様を理解しやすくなるため、ぜひご活用ください。

  • このエントリーをはてなブックマークに追加