コピペで実装！仕事でよく使うボタンのCSSアニメーション7選
最近、仕事でよく使うボタンのアニメーションを7つご紹介します。
今回は常にアニメーションを動かすものに絞って、アレンジしやすいようにモノクロで作っています。マウスオーバーで変化するアニメーションは、次回ご紹介しますね。
① ふわふわ上下に動くボタン
定番のふわふわ浮いてるようなアニメーション。ボタンの下に丸い影を付けるとよりリアルに。
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.
⑧ まとめ
今回はモノクロで作成していますが、背景色を変えるととっても可愛いボタンが作れます。
この7つのボタンは普段よく使うアニメーションなので、自分にもかなり使える記事になりましたｗ
私はボタンのアニメーションで、ページ全体のレベルを上げることができました。まだアニメーションを使ったことがない人は、絶対にやった方がいいですよ。
最後までご覧いただきありがとうございました。