【CSS】hoverでボタンアニメーションを実装

サイト制作の経験があると、何かしらのアニメーションを実装させる機会にぶち当たることもあるのではないのでしょうか？最近では、アニメーションが実装されていないサイトを見かけることも少なりました。

実際に毎回と言っていいほどサイトにアニメーションを入れることが多く、ぬるっと動くことに気持ちよさも感じてしまうほどです。今回は手軽に実装しやすい、お気に入りのボタンアニメーションをご紹介します！

※CODEPENの使用方法は割愛させていただきます。

シンプルな下線アニメーション

See the Pen hover_underline by otamu (@otamu) on CodePen.

テキストにカーソールを合わせると、下線のアニメーションが表示されます。

headerやfooterなど、テキストベースでシンプルになりがちな時に実装することが多いです。デザイン選ばず使用しやすいので、初心者の方にもおすすめです！

ボックスの下線アニメーション

See the Pen hover_box to underlime by otamu (@otamu) on CodePen.

ボタンエリアにカーソールを合わせると、ボックスを基準にアニメーションが表示されます。

トップページのコンテンツや、フォームのボタンなどに実装することが多いです。ひとつのボタンとして確立されていれば実装しやすいので、こちらも比較的使用しやすいかと思います。

縁取りアニメーション

See the Pen hover_box to line by otamu (@otamu) on CodePen.

テキストにカーソールを合わせると、テキストの周りをボックスで縁取られるアニメーションです。

テキストの周りにある程度の余白を確保する必要があるので、サイトデザインによっては使用の仕方が難しいかもしれません。全体的に余白で構成されているサイトに使用すると、とてもきれいに映えます。

まとめ

現在のサイト制作ではアニメーションは欠かせないものになってきています。
過度な使用は逆に世界観を崩してしまう可能性がありますが、小さなボタンのアニメーションでもクライアント様は「動いた！！」ととても喜んでくださるので、積極的に取り入れられるといいですね！