【html/css】hover(ホバー)エフェクトが面白いボタンまとめ

コーディング

webサイトのコーディングをしている時に、ページ遷移させるボタンなどにアニメーションやエフェクトを付ける機会はよくあると思いますが、サイトのデザインや顧客の希望によって、アニメーションの動きを変える必要もあるかもしれません。
そんな時に使える、ボタンのhover(ホバー)エフェクトをいくつかご紹介します。

【html/css】hover(ホバー)エフェクトが面白いボタンまとめ

こちらで紹介しているボタンのホバーエフェクトはcodepenというコーディングしながらプレビューを確認したり、作品として投稿できるツールを使用しています。
html、cssコードは適宜コピーして色、文字、クラスを変えるなどして、お使いください。

シンプルな色反転ホバーエフェクト①

シンプルなテキストリンクになります。「transition」でゆっくり色反転するよう設定しています。
 

シンプルな色反転ホバーエフェクト②

次はホバー時に文字色と背景色を反転させるシンプルなホバーエフェクトです。1つ目と同じく「transition」でゆっくり色反転するよう設定しています。
 

スライド色反転ホバーエフェクト

基本的には最初のシンプルなホバーエフェクトと動きは同じですが、背景色がスライドして色反転するようにしています。「transform-origin」が背景色のスライド方向の設定になりますので、スライド方向を変える場合はこちらの値を変更してください。
 

色反転+スプラッシュホバーエフェクト

次は上記2つの動き+ホバー時に線が広がるエフェクトを追加しています。「outline」を使用することで、線が広がるエフェクトを実装できます。また、このoutlineに「norder-radius」のような線の角を丸くする記述はありません。
 

まとめ

今回はwebサイトのコーディング時に使えるホバーエフェクト、アニメーションを紹介しました。ここで紹介したエフェクト以外にも作り方次第で様々な動きのボタンを実装できるので、是非チャレンジしてみてください。

タイトルとURLをコピーしました