シンプルな黒ボタンのマウスオーバーCSSアニメーション 10選
マウスオーバーでおしゃれなサイトに！
WEBサイトを作るときに、必ず設置するのが「ボタン」ですよね。
お問い合わせに飛ぶボタンや購入ボタンなど目的はさまざまですが、ボタンはとても重要な役割を持っています。
用途に合わせて目立つ（わかりやすい）ボタンからシンプルなボタンまでを使い分けることがとても大切です。
今回はよく使われるボタンの中から、マウスのポインターがボタンに触れたときのアニメーション（マウスオーバー）をご紹介しようと思います。
簡単なCSSのみで実装できるので、コピペして活用してみてください。
マウスオーバーについて
ここで簡単にマウスオーバーについて解説したいと思います。
WEBぺージでテキストや画像にマウスをのせたときのことを「マウスオーバー」といいます。
ただのテキストや画像であれば、マウスオーバーをしても何も変化はしません。
マウスオーバーで変化した時は、閲覧者にこの先に何かアクションがあることを伝えることができます。
おもに他のページに誘導したいときに、このマウスオーバーを活用します。
マウスオーバーの指定はCSSで簡単にできるので、絶対に取り入れたい実装です。
ボタンタグの後に:hoverをつけるだけで簡単にマウスオーバー時のアニメーションを作ることができます。
いくつかの例を見ながら、一緒に実装していきましょう♪
よく読まれている記事
下に動くマウスオーバー
一番簡単な下に動くアニメーションと、少しボタンの色を変えたアニメーションです。
本物のボタンを押したときのような動きなので、とても分かりやすいと思います。
手っ取り早く動かしたいときの実装におすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下線が出てくるマウスオーバー
ボタンそのものの変化はないですが、中の文字に下線が出てくるアニメーションです。
テキストの長さに合わせてwidthで自由に変更できます。
下線はリンクテキストなどにもよく使われるシンプルなマウスオーバーの一つです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
下に影ができるマウスオーバー
マウスを置いたときに、斜め下に影ができるアニメーションです。
ボタンは立体的なイメージがあるので、影をつけるだけでちょっと押したくなりますね。
どんなボタンの色でも使えるとても万能な実装です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
色反転するマウスオーバー
視覚的に一番わかりやすいのが、色が反転するアニメーションです。
元のボタンの色の背景と文字色が反対になることで他のテキストと大きな差を作ることができます。
コードも短く、シンプルなので手っ取り早く実装したいときはオススメです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
文字が動くマウスオーバー
テキストの文字間隔が変化するアニメーションです。
ボタンの横幅に入る程度の間隔であれば好きに調整することができます。
ありそうで意外と思いつかない実装です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
角が丸くなるマウスオーバー
四角のボタンが楕円のような形に変形するアニメーションです。
角丸のpx値を小さくすると、さりげなく形を変えることもできます。
ボタンの色を変えたくない時にとてもおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
内線がでてくるマウスオーバー
ボタンの内側に線がふわっとでてくるアニメーションです。
線の太さを変えたり、点線に変えたりいろんなバリエーションができます。
コードは他のボタンより少し複雑ですが、一度は使ってみたい実装です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左から色がスライドして変わるマウスオーバー
左側からスライドしながら色が変わっていくようなアニメーションです。
box-shadowだけで簡単に作れるので覚えておくととても便利です。
スライドの方向を変えてみるとまた違う印象になりそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ボタンが大きくなるマウスオーバー
ボタンが1回だけ大きくなるアニメーションです。
クリックしようとすると、ボタンが大きくなるので押してみたくなりますね。
シンプルですがどんな色のボタンにもおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
枠を線が走るようなマウスオーバー
ボタンの枠の上を線が走っていくようなアニメーションです。
4方向から順番に線をアニメーションさせることで、1つの動きにみせています。
ITや情報系のスピード感のあるサイトに最適です。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は黒ボタンのシンプルなマウスオーバーについていくつかご紹介しましたが、いかがでしょうか？
マウスオーバーした時に色を変えるだけでも、WEBページとしての印象がかなりよくなります。
WEBページにとって「ユーザーに信頼してもらえること」が一番の目的です。
些細な工夫の積み重ねがサイトのこだわりとなり魅力になります。
まだまだ他社が取り入れていないようなアニメーションをどんどん作っていきましょう！
最後までご覧いただきありがとうございました☆彡