webデザイナーやコーダーなどwebエンジニアの方がwebサイトのコーディングをしている時に、ページ遷移させるボタンなどにアニメーションやエフェクトを付ける機会はよくあると思いますが、サイトのデザインや顧客の希望・要望によって、アニメーションの動きを変える必要もあるかもしれません。
そんな時に使える、ボタンのhover（ホバー）エフェクトをいくつかご紹介します。
【html/css】hover（ホバー）エフェクトが面白いボタンまとめ
※こちらで紹介しているボタンのホバーエフェクトはcodepenというコーディングしながらプレビューを確認したり、作品として投稿できるツールを使用しています。
html、cssコードは適宜コピーして色、文字、クラスを変えるなどして、お使いください。
シンプルな色反転ホバーエフェクト①
シンプルなテキストリンクになります。アニメーション速度を設定できる「transition」プロパティを使用して、ゆっくり色反転するよう設定しています。ボタンだけでなく、メニューなどにも使えます。
シンプルな色反転ホバーエフェクト②
次はホバー時に文字色と背景色を反転させるシンプルなホバーエフェクトです。1つ目と同じく「transition」プロパティでゆっくり色反転するよう設定しています。
スライド色反転ホバーエフェクト
基本的には最初のシンプルなホバーエフェクトと動きは同じですが、背景色がスライドして色反転するようにしています。よくあるアニメーションではなく、一味変えたアニメーションにしたいという時に使えると思います。「transform-origin」プロパティが背景色のスライド方向の設定になりますので、スライド方向を変える場合はこちらの値を変更してください。
色反転＋スプラッシュホバーエフェクト
次は上記2つの動き＋ホバー時に線が広がるエフェクトを追加しています。「outline」プロパティを使用することで、線が広がるエフェクトを実装できます。スライドアニメーションと同じく、変わったアニメーションを設定したいときにおすすめです。
また、このoutlineには「border-radius」のような線の角を丸くする記述はありませんので注意してください。
まとめ
今回はwebサイトのコーディング時に使えるホバーエフェクト、アニメーションを紹介しました。ここで紹介したエフェクト以外にも作り方次第で様々な面白い動きのボタンを実装できるので、是非チャレンジしてみてください。
