Web学習中の方なら、いろいろなサイトの模写や教材などで、様々なパターンのボタンに出くわすと思います。
その都度、ホバーした時のエフェクトとかアニメーションを調べているのも大変なので、いくつかパターンを自分の型として持っておくと、その応用として意外とコーディングする時間を早くできるのではないかと思い、備忘録として3つまとめてみました。
背景色が横に流れる
1つ目は、カーソルを当てると、背景色が横に流れるように変わるパターンです。
See the Pen hover animation (左から右に背景色が変わっていく） by bat (@bat20190608) on CodePen.
ポイントは、擬似要素で背景色を用意し、初めは表示しないようにtransform: scale(0,1); でX軸を0にしておくこと、です。
カーソルをボタンの上に置いたとき(ホバー時)に、transform:scale(1,1); にすることで
背景色が中央から両端に流れる
2つ目は、カーソルを当てると、背景色が中央から外側へ広がるように変わるパターンです。
See the Pen hover animation (背景が中央から外側へ） by bat (@bat20190608) on CodePen.
ここのポイントは1つ目のと同様ですが、疑似要素のホバーの設定で、transform-origin を center にしておくこと。
それによって中央からスタートします。
ホバーしていない時の transform-origin もcenter にしておくと、カーソルを外したときに中央に収束する感じになります。
個人的には流れるタイプよりこっちの方が好き。
三角形が動く
最後は、ボタンの中の三角形が動くタイプです。
3つの中ではこれが一番好き。
See the Pen hover animation (三角形が動く） by bat (@bat20190608) on CodePen.
ホバー時に背景色が少し濃くなり、三角形のアイコンが動く感じがかわいい。
矢印の形になっている三角形は実は四角形です。
ポイントは4辺のうちの2辺をtransparent で透明化(実質、削除)して、それを回転させることで残った2辺が矢印のような形になります。
このあしらいって結構定番ですよね。
Font Awesomeなどでアイコンを読み込む方法もありますが、こちらで紹介する方法の方が簡単だと思います。
そしたら三角形を疑似要素(after)として位置を特定した上で(position: absolute; )、右からの位置を、初めの2.5remからホバー時に2remに変えることで動きをつけます。
変化の速度は疑似要素の方にtransition を設定します。
以上、おすすめのホバー時のアニメーションでした。
ここからアレンジすれば、かなりいろいろなタイプに対応できるのではないかと思います。
