ボタンにアニメーションつけてますか？

HPやLPで必ず設置するボタンですが、ただ置いておくだけと、アニメーションを付けるとで効果は大きく変わってくる可能性があります。 web広告代理店のデザイナーとしては、ユーザーが「つい押してみたくなる」ようなボタンをつくるアイデアや技術が必要となってきます。 今回は私が仕事でよく使うアニメーションや、趣味で制作したアニメーションを12本ご紹介したいと思います。 全てCSSのみで実装しているので、コピペで実装できます。

動くボタンCSSアニメーション12選

①ドクンドクンと振動するボタン

よく私が業務でも使用するアニメーションの一つです。ドクンドクンと振動させることによって、ボタンの存在感をより引き立てることができます。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

②キラーンと光るボタン

これも、よく私が業務でも使用するアニメーションの一つです。高級感のある商材やサービスで使用する時におすすめです。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

③ぷるーんと伸び縮みするボタン

スライムのように伸び縮みするアニメーションです。ポップな商材やサービスで使用するときにおすすめです。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

④カチカチと動くボタン

クリックを誘発させるかのようにカチカチ動くアニメーションです。汎用性が高いので、どの商材やサービスにも合うかと思います。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑤ガタガタ揺れるボタン

このアニメーションはあまり使いませんが、変わった表現をしたいときに使ってみると面白いかもしれません。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑥色が変わるボタン

グラデーション状に色が変化していくアニメーションです。美容やファッションなどのオシャレな商材やサービスに合うかと思います。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑦横に動くボタン

これも良く使われるアニメーションの一つです。ちょっと目を引きたいときにおすすめですが、あまり激しく揺らすと文字が見えづらくなるので注意が必要です。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑧波紋が広がるボタン

これはあまり使用しませんが、どのアニメーションよりもボタンの存在感が増すので、特殊なデザインや変わった表現をしてみたいときに使用するといいかもしれません。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑨点滅するボタン

危険信号のように点滅するアニメーションです。今回は点滅にしていますが、色をカラフルにして動かしても面白いかもしれません。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑩モワモワと光るボタン

灯のようにモワモワ光るアニメーションです。今回は背景を白にしていますが、背景を暗めにしたら、ネオン感が出ておすすめです。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑪背景のボーダーが動くボタン

これはあまり使いませんが、背景のボーダーが動くアニメーションです。他のアニメーションと組み合わせて使えば、個性的な表現ができるかもしれません。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

⑫周りの点線が動くボタン

これもあまり使いませんが、ポップな表現をしたいときに使用してみるといいかもしれません。

See the Pen Untitled by Kohei Morita (@Kohei-Morita) on CodePen.

まとめ

以上、動くCSSボタンアニメーション12選でした！ 株式会社メタップスワンでは、こういったデザインやコーディング、動画編集をしていただけるクリエイターの方を募集しています！ 興味のある方は、下記の採用情報をから是非、ご応募ください！

メタップスワン採用情報