Animation

コピペで実装!仕事でよく使うボタンの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つのボタンは普段よく使うアニメーションなので、自分にもかなり使える記事になりましたw

私はボタンのアニメーションで、ページ全体のレベルを上げることができました。まだアニメーションを使ったことがない人は、絶対にやった方がいいですよ。

最後までご覧いただきありがとうございました。