仕事でよく使うボタンのCSSアニメーション 10選
ボタンにアニメーションつけていますか？
WEBサイトで必ず設置するボタンですが、ただ置いておくだけではもったいない！
ボタンはユーザーを別の場所に移動させたいときに使います。
ユーザーが「つい押してみたくなるような」ボタンであることが必要です。
1番有効的な手段として、アニメーションがあります。
今回は私が仕事でよく使うボタンのアニメーションを7つご紹介したいと思います。
本記事では常にアニメーションで動かすものに絞って、アレンジしやすいようにモノクロで作っています。
すべてCSSアニメーションのみで作成しているので、コピペで実装できます。
CSSアニメーションについては下記記事で詳しく解説しているので、興味のある方は読んでみてください。
ふわふわ上下に動くボタン
定番の、上下にふわふわ浮いてるようなアニメーションです。
さりげなく動きをつけたいときにおすすめです。
上下に動く幅を大きくしたり、動きを早くすることでさらにユーザーの目を引きやすくなります。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
ぶるぶる左右に動くボタン
これも良く使われる、左右にぶるぶる震えるようなアニメーションです。
LPなどでちょっと目を引きたいときにおすすめです。
あまり激しく揺らすと字が見えづらくなるので注意しましょう。
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.
びよんびよんとのびるボタン
斜めの方向によじれてのびるようなアニメーションです。
フォントも一緒に伸び縮みするので、面白い印象がありますね。
画像ボタンにもおうようできるので、LPのボタンにもおすすめです。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
くるくると回るボタン
前方向にくるくると回転するようなアニメーションです。
連続で回転させるとボタンの中の文字が見えづらいので、回転の感覚をあけるのがおすすめです。
WEBサイトでは回転する画像やテキストは少ないので、存在感をプラスしたいと気に使えます。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回はモノクロで作成してみましたが、色を変えるだけでとっても可愛いボタンが作れます。
この7つのボタンは普段よく使うアニメーションばかりなので、ブックマークしていつでも確認できるようにしておいてください。
私はボタンのアニメーションで、サイト全体のコンバージョンを上げることができました。
どれだけボタンがサイトに与える影響が大きいということがわかりました。
記事を見てわかっていただけたと思いますが、ボタンに動きがあるだけでサイト全体の雰囲気が全然違います。
まだアニメーションを使ったことがない人は、積極的に取り入れてみてください♪
最後までご覧いただきありがとうございました☆彡