Webサイトに必ず設置する「ボタン」。
ボタンの上にポインタを乗せると色が変わったり変形したりする、アニメーションがついているボタンを見たことがありますか？
アニメーションがついているボタンは、ユーザーにアクション実行の動機を与えやすくなります。
他にも、コンバージョン率の向上にも繋がったりと、重要な役割を持っています。
そこで、今回はいろいろなボタンのホバーアニメーションをご紹介します。
全てCSSで動くものなので、コピペで実装可能です。ぜひ参考にしてみてください。
この記事の目次
基本のホバーアニメーション
背景色が反転する
See the Pen
背景が反転する by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに背景色が反転します。
Webサイトの色味に合わせると、デザインに問わず使えます。
背景色が半透明になる
See the Pen
背景が半透明になる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに背景色が半透明になります。
「:hover」の「opacity」を0.7に指定しています。ボタンの文字が読める程度の透明度です。
矢印が右に動く
See the Pen
矢印が右に動く by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに矢印（>）が右に動きます。
サイズが少し大きくなる
See the Pen
サイズが少し大きくなる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときにボタンのサイズが少し大きくなります。
「:hover」の「transform」に「scale(1.1,1.1)」を指定しています。
scaleの値を大きくするともっと大きくなります。
サイズが少し小さくなる
See the Pen
サイズが少し小さくなる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときにボタンのサイズが少し小さくなります。
ボタンを押し込んだようなアニメーションです。
こちらは「:hover」の「transform」に「scale(0.9,0.9)」を指定しています。
立体的なボタンのホバーアニメーション
押し込み（上→下）
See the Pen
押し込み（上→下） by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとボタンを上から下に押し込んだように動きます。
「box-shadow:」で数値の指定を変えるとぼかしがついた影にすることもできます。
押し込み（左上→右下）
See the Pen
押し込み（左上→右下） by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとボタンを左上から右下に押し込んだように動きます。
押し込み（右上→左下）
See the Pen
押し込み（右上→左下） by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとボタンを右上から左下に押し込んだように動きます。
背景が動くボタンのホバーアニメーション
背景が左から右に流れる
See the Pen
背景が左から右に流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに背景が左から右に流れます。
ポインタを乗せる/外すの動きで、背景色が流れていきます。
背景が右から左に流れる
See the Pen
背景が右から左に流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに背景が右から左に流れます。
背景が中央から上下に流れる
See the Pen
背景が中央から上下に流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに背景が中央から上下に流れます。
こちらはポインタを乗せる/外すの動きで、背景が広がっていくようなアニメーションです。
背景が中央から左右に流れる
See the Pen
背景が中央から左右に流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーしたときに背景色が中央から左右に流れます。
文字+下線のホバーアニメーション
下線が現れる
See the Pen
下線が現れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーすると文字下に線が現れます。
ホバー時に文字色や線の色を変えるともっと効果的なボタンになります。
下線が左から右に流れる
See the Pen
下線が左から右に流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーすると文字下の線が左から右に流れます。
下線が右から左に流れる
See the Pen
下線が右から左に流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーすると文字下の線が右から左に流れます。
下線が中央から左右に伸びる
See the Pen
下線が中央から左右に伸びる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーすると文字下の線が中央から左右に伸びます。
その他いろいろなホバーアニメーション
文字間が広がる
See the Pen
文字間が広がる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとボタン内の文字の文字間が広がります。
ボタンが回転する
See the Pen
ボタンが回転する by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとボタンが回転します。
波紋が広がる
See the Pen
Untitled by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとボタンの周りに波紋が広がっていきます。
グラデーションの色が流れる
See the Pen
グラデーションの色が流れる by ADLAB Inahara (@adlab-inahara)
on CodePen.
ホバーするとグラデーションの色が流れます。
「background」の「linear-gradient」内のカラーコードを変えるだけで好みのグラデーションになります。
最後に
いかがでしたでしょうか？
CSSで動くボタンのホバーアニメーションをご紹介しました。
気になったホバーアニメーションはありましたか？
CSSコピペで実装可能なので、そのまま使えます。
色を変更してみたり、角丸にしてみたりカスタマイズしても良いですね！
ぜひWebサイトに取り入れてみてください！参考になれば幸いです。
アドシンの制作実績に掲載しているWebサイトも、ボタンに注目して見てみてください。
この記事を書いた人
サウナと乳製品と明太子が好きです。
お客様に気に入っていただけるデザインを手がけられるよう、日々勉強中です。
ご相談・お見積りは無料です。
どんなことでもご相談ください。
サービス内容の疑問や､お気軽なご相談まで､
ひとつずつ丁寧にお答え致します。