![](../img/blog/img01.jpg)
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サイトに取り入れてみてください!参考になれば幸いです。