CSSホバーアニメーションの使える引き出しを増やそう

あなたはボタンのホバーアニメーション、どうしていますか？ホバーエフェクトは数多くあり、いざ実装しようと思っても、つい自分のお決まりのエフェクトを使いがちです。

そこで今回は、ホバーアニメーションの引き出しを増やすべく、コピペで使える様々なホバーアニメーションを紹介します。

ホバー（:hover）について

ホバーアニメーションが分からない方に簡単に説明します。

:hoverとは、あるセレクタの特定の状態にスタイルを指定する擬似クラスの一つです。擬似クラスには:activeや:checkedなど色々ありますが、マウスのカーソルが合わさった状態が:hoverです。よく、htmlでリンクをつくるaタグと使用します。

:hoveを使うことで、リンクボタンなどにカーソルを置いた時にスタイルを変化させたり、動きをつけることができます。こうすることで、ユーザーが直感的にリンクだと分かりやすくなります。

:hoverを使った基本的な構造

まずはこちらのCSSのコードをご覧ください。
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”MWWBmpe” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen MWWBmpe by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]

aタグのボタンにカーソルを合わせると色が反転します。:hoverでaタグの背景色、background-colorとテキストbuttonの色、colorを変えているのが分かるかと思います。また、aタグにtransitionプロパティでアニメーション（変化）の時間を指定しているので、ホバー時に一瞬で変わるのではなくゆっくりと変わるようにしています。このように、やんわりと変化させるために、transitionも指定しましょう。

ボタンのホバーエフェクト

まず基本的な構造として紹介した、背景と文字の色が反転するホバーエフェクトはサイトのボタンデザインでよく見かける例です。他にもよく使われているボタンのホバーエフェクトをCSSと一緒に紹介していきます。

へこむボタン

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRRBWJE” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen GRRBWJE by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
マウスをホバーした時に、ボタンが沈むというエフェクトです。CSSのコードを説明すると、border-bottomでボタンの立体感を出し、ホバー時にborder-bottomをnoneにし、ボタン自体をtransformプロパティでY軸方向に5px移動させています。立体感のある見た目に、ホバーすると沈むという動きは、直感的に押せそうと感じるボタンですね。

矢印が動くボタン

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”LYYBWyR” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen LYYBWyR by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
右端に置いた矢印がホバー時に動くエフェクトです。:after擬似要素の矢印をposition: absolute;で配置し、:hoverで矢印の位置を変更しています。

浮き上がるボタン

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”GRRBWyy” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen GRRBWyy by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
ボタンが浮き上がり、影がつくというエフェクトです。box-shadowでbottomに影を付け足し、transformでY軸方向上に移動させています。

横から背景がスライドするボタン

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNNryqO” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen rNNryqO by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
背景と文字の色が反転するエフェクトに少しアニメーションを足したようなものです。:after擬似要素で背景をつくり、left: -100%;で見えないように設定しておきます。:hoverでleft: 0;にしスライドさせています。こちらは左から背景が入るようになっていますが、topやbottomを設定して、上からだったり、下からだったりと、他のパターンにもできますね。

背景が上下に分かれるボタン

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”mddjWNK” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen mddjWNK by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
こちらも背景がアニメーションするエフェクトです。:before擬似要素と:after擬似要素でheight: 50%;で上下半分ずつ背景を設定しています。ホバー時にこれらの擬似要素の背景が高さ0で背景を透明にしています。

キラリーンと反射するボタン

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”jOOzZRz” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen jOOzZRz by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
少し凝ったエフェクトにしたいときに使えそうです。:after擬似要素で透過した白背景のものをホバー時に左から右へとスライドさせています。

画像のホバーエフェクト

webサイトでよく、サムネイル画像がリンクになっていることがありますよね？そのサムネイル画像にカーソルを置くと画像にエフェクトが適用されているものをよく見かけます。

ここからは画像にマウスオーバーをしたときに使えそうなエフェクトをCSSと一緒に紹介していきます。

画像を拡大する

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”MWWBobr” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen MWWBobr by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
ホバー時に画像（imgタグ）をtransformプロパティでscale(1.2)と拡大させています。拡大した時に、画像を括った要素からはみ出さないよう、overflow: hidden;を設定しています。

画像を回転しながらズームアウト

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”abbjwYM” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen abbjwYM by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
あらかじめ、transformプロパティで画像を15度傾け、スケールを1.4倍に拡大させています。ホバー時に角度0、スケール1の通常の表示に設定しています。

画像をグレースケールに変換する

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNNrwQo” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen rNNrwQo by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
filterプロパティを使用して、画像をグレースケールに変換しています。画像の上に文字などを置きたい時に使えるかと思います。また、filterプロパティにはblur（ぼかし）やsepia（セピア）などもあるので色々試してみるのもいいですね。

画像を透過する

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”rNNrzBb” default_tab=”css,result” user=”ramentabetaidesu”]See the Pen rNNrzBb by ktk (@ramentabetaidesu) on CodePen.[/codepen_embed]
よく見かける、opacityで画像を半透明にしたものです。画像の背景に黒や色を指定することで様々な見せ方ができるかと思います。こちらも画像の上に文字を置くときに使いやすいですね。

:hoverアニメーションのCSSパターンを増やそう

私自身、サイトの構築の際、ボタンのホバーアニメーションでは無難な、背景と文字の色が反転するものを選びがちです。こやってまとめてみましたが、色々なエフェクトのCSSパターンをまとめてストックしておくと便利で、作業もスムーズに進むのではないかと思います。今回紹介したエフェクトをぜひ参考にしてみてください。

マーケティングでお悩みでしたら、
Bigmacにお任せください。