UPDATE：2022.3.25
- CATEGORY
【コピペ可】cssで作る簡単なhoverのアイデア・ボタン編
マウスカーソルを合わせた時に発生するアニメーションなどの変化の表現「hover（ホバー）」。以前はアニメーションの表現といえばJavaScriptの利用が必要でしたが、
現在はCSSのみで様々な表現が可能となっています。
前回は画像のhoverアニメーションアイデアをご紹介しました。
【コピペ可】cssで作る簡単なhoverのアイデア・画像編
今回はホームページで設置することの多い「ボタン」について
シンプルで簡単に実装できるhoverアニメーションのアイデアを20個ご紹介します。
今回のアイデアも前回の画像hoverアニメーション同様、コピペで利用可能です。
表現に合わせて適宜cssを変更などしてお気軽にご利用ください。
※スマホ操作時はhoverが正常に機能しません。
スマホから閲覧しているユーザーの方は今回正しい動作でご覧いただくことができないのでパソコンからの閲覧を推奨します。
ボタンのボーダーが変化するアイデア
シンプルなボーダーの変化①
とてもシンプルなボーダーの変化です。
hoverで背景色が白になり、ボーダーが残ります。
シンプルなボーダーの変化②
こちらもシンプルなボーダーの変化。
hoverで背景色が白になり、上下のボーダーが残ります。
cssを変更すれば左右のボーダーを残すことも可能です。
上下のボーダーが伸びる
上のアイデアに少し手を加えて、上下のボーダーが伸びるアニメーションに変更したパターンです。
上よりほんの少しhoverに遊び心を感じますね。
上下左右からボーダーが伸びる
上のアイデアに＋αしたもの。
上下だけではなく左右もボーダーが伸びます。
しかし上下だけではなく左右も疑似要素が必要になるため、上記よりも少しだけcssが複雑になりました。
ボーダーの形状が変わる
hoverすることでボーダーが丸く変化するアニメーション。
形状が変わることでよりhover時の変化がユーザーに伝わりやすくなりますね。
ボーダー＋テキストの変化①
hoverでボーダーとともにテキストも変化します。
テキストをhtml内ではなく疑似要素内に記述することでhoverと共に変化させています。
ボーダー＋テキストの変化②
ボタンの背景が変化するアイデア①
背景が横スライドで変化するボタン①
疑似要素を利用してスライドで変化するアニメーションを実現しています。
背景が左右から変化するボタン
こちらも上記同様、疑似要素を利用してのアニメーション。
上記と違うのは疑似要素を二つ利用してる点です。
背景が上下から変化するボタン
背景が上下ジグザグに変化するボタン
疑似要素を４つ使い、上下ジグザグに背景が伸びてくるアニメーションです。
疑似要素が増える分、少々複雑なhtmlとcssになります。
背景が横スライドで変化するボタン②
上記同様に疑似要素を４つ使い、横スライドを少し複雑にしたパターン。
背景が上下よりかっこよく変化する
疑似要素をtransform: rotateで斜めに配置するのがポイントです。
hoverで斜めになった疑似要素がボタン上に被さります。
背景が左上から変化するボタン
疑似要素で大きな黒い円を事前に作成し、ボタンの範囲外に配置しています。
（overflow: hiddenにより範囲外の疑似要素は表示されません）
hoverで範囲外の円をボタンの範囲内に移動させることで、円がボタンに大きさぶさってこのようなアニメーションになります。
背景が右下から変化するボタン
ボタンの背景が変化するアイデア②
きらりと光るボタン
hoverしたときにボタンがキラリと光るように見えるアニメーションです。
キラリとした表現は疑似要素。
ボタン全体に「overflow: hidden」を設定することで
アニメーションする疑似要素の不要部分を隠し、光る表現を実現しています。
背景がグラデーション色に変化する
hoverしたときにボタンの背景がグラデーションに変化します。
ポイントはグラデーションの設定をボタンのbackground-imageプロパティではなく、
疑似要素に設定することです。
こうすることでグラデーションに対するtransitionプロパティが有効となり、
ゆっくりとした色の変化を表現することができます。
背景が中心からグラデーション色に変化する①
こちらも疑似要素にグラデーションを設定することでゆったりとした変化を実現しています。
背景が中心からグラデーション色に変化する②
上記アイデアに少し変化を加えたバージョン。
円が徐々に大きくなってボタン全体の色を変化させます。
その他のボタン
クリックしたように見えるボタン
ボタンに設定したbox-shadowプロパティをhover時に非表示にすることで
簡単にボタンをクリックしたような表現ができます。
おわりに
hover時のアニメーションはちょっとした工夫ではありますが、そのアイデアを考えるのは意外と大変なもの。ぜひ今回のアイデアを活用して様々なアニメーションのボタンを実装してください◎
