【コピペでOK！】CSSマウスホバーアニメーション16選
ボタンにマウスホバーアニメーションつけてますか？
PCでのwebサイトに必ず設置するボタンですが、マウスホバーアニメーションを付けるか付けないかで、webサイトのクオリティは高くなります。ちょっとした要素に素敵なマウスホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象も良くなります。 今回は汎用性の高いCSSマウスホバーアニメーションを16本ご紹介したいと思います。全てCSSのみで実装しているので、コピペで実装できます。
CSSマウスホバーアニメーション16選
①色が変化するボタン
いろんなwebサイトでよく使われている定番のマウスホバーアニメーションになります。色の変化する速度を0.5秒にすることで若干ゆっくり色が切り替わります。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
②影が浮き出るボタン
これもいろんなwebサイトでよく使われている定番のマウスホバーアニメーションになります。影を浮き出すことによって、ユーザーに「押せるもの」だと認識されやすくなります。
See the Pen
Untitled by Kohei Morita (@Kohei-Morita)
on CodePen.
③テキストが変わるボタン
今回demoでは「Hover」に変化しますが、「クリック」や「詳しくはこちら！」などにしても良いかもしれません。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
④沈むボタン
実際に押しているように見えるためユーザーにも優しいですし、動きがついているため、つい押したくなるようなアニメーションです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑤180°回転するボタン
これはあまり使いませんが、アイデアの一つとして持っておくと面白いかもしれません。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑥大きさが変わるボタン
マウスホバーするとボタンが拡大することで、ボタンの存在感が増すので、おすすめです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑦形が変わるボタン
今回、わかりやすく四角から丸いボタンに変化させていますが、他の形にも変化させても面白いと思います。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑧Z方向に回転するボタン
⑤のY方向（縦）と違ってZ方向（奥行き）で回転します。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑨テキストが動くボタン
マウスホバーするテキストのカーニング（文字の間隔）が広がります。単体だとささやかなので、他のアニメーションと組み合わせてみるのがおすすめです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑩窓が上から閉まるようなボタン
窓のようなものが、上から閉まるように動いてきます。コーポレートサイトなどにおすすめです。疑似要素（:after）で作った背景色を斜めに変形させて、左斜め上から背景色が下りてくるようにします。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑪菱形に形が変わるボタン
スタイリッシュなマウスホバーアニメーションです。transformのskewXを使うことで実装できます。transform: skewX(-45deg);で角度を調整できます。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑫枠線が変わるボタン
枠線が切り取られるようなマウスホバーアニメーションです。ホテルのホームページとか、ラグジュアリーなサイトでもよく使われているイメージです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑬横からスライドするボタン
ゲームの体力ゲージのように色が変化するマウスホバーアニメーションです。ナビゲーションや、テキストリンクに使えそうなアニメーションです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑭斜めからスライドするボタン
マウスホバーすると、斜めからスライドして色が変わるアニメーションです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑮テキストがスライドするボタン
③のマウスホバーアニメーションとは違い、テキストが左からスライドします。こちらもコーポレートサイトなどにおすすめです。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
⑯外側から色が変わるボタン
マウスホバーすると、外側から色が変わるアニメーションです。疑似要素（:after）を、opacity: 0;、transition: all 0.4s;で設置しておき、ホバーで表示させます。
See the Pen
Untitled by koheimorita (@koheimorita)
on CodePen.
まとめ
以上、CSSマウスホバーアニメーション16選でした！
株式会社メタップスワンでは、こういったデザインやコーディング、動画編集をしていただけるクリエイターの方を募集しています！
興味のある方は、下記の採用情報をから是非、ご応募ください！