よく使う白ボタンのマウスオーバーCSSアニメーション 12選
白いボタンはマストだね！
前回は黒いボタンのマウスオーバーアニメーションをご紹介しました。
今回はその反対の黒い枠のついた白いボタンのマウスオーバーアニメーションについてご紹介していこうと思います。
色が反転しただけですが、それけでもアニメーションのバリエーションはかなり異なります。
どんなサイトにも一つは白いボタンがあると言っても良いほど使う頻度がとても高いボタンなので、今回の記事で覚えておきましょう♪
よく読まれている記事
色反転するマウスオーバー
黒と白の色がふわっと反転するようなアニメーションです。
これは初心者の方でも簡単にできるので、この実装でアニメーションに慣れるのも良いと思います。
コーダーであれば一度は必ず使ったことのある定番のデザインです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
上に動いて下に影ができるマウスオーバー
ボタンが上にふわっと動いて、下にぼやけた影ができるようなアニメーションです。
box-shadowで影をつけているだけなのに、立体的にボタンが浮かんだように見せることができます。
LPなどのポイントに使ってみても良いですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
左から色がスライドして変わるマウスオーバー
左側からスライドしながらスーッと色が変わっていくようなアニメーションです。
これもbox-shadowを使って簡単に実装することができ、影の位置を変えて右からスライドさせることもできます。
最近流行りのスタイリッシュなページにもぴったりですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
両端から色がスライドして変わるマウスオーバー
両サイドからスライドしながら閉じるように色が変わっていくようなアニメーションです。
box-shadowの大きさを変えていろいろなカスタムができます。
終わりっぽいデザインなので、お問い合わせページに誘導する時に使えそうですね。
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.
枠線がズレて色が変わるマウスオーバー
ズラしたような枠線が混じり合って一つになるようなあまり見かけないアニメーションです。
ちょっと不思議な動きは、何度もマウスを動かしたくなりそうです。
凝ったサイトを作りたい時におすすめです。
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.
矢印が出て色が変わるマウスオーバー
右側に矢印が出てきて色が反転するようなアニメーションです。
ボタンの中のテキストと矢印が動くので、動きが大きく変化が見やすいですね。
ボタンの外側には何も変化がないので、場所を気にせず実装できます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
コーダーなら絶対に一度は使ったことのある白ボタンのマウスオーバーをご紹介しましたが、使ったことのあるものはありましたか？
ボタンに時間をかけたくない時は、コピペして時短してもいいと思います。
CSSアニメーションも進化して、いろんなバリエーションを作ることができるようになりました。
新しい機能がどんどん出てくるので、今ある機能をすこしずつ覚えていきましょう♪
随時、新しいボタンを追加していくので、ブクマして確認してみてください。
最後までご覧いただきありがとうございました☆彡