ボタンのホバーアニメーション3選【初心者でもコピペでOK】

未分類

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 を設定します。

 

以上、おすすめのホバー時のアニメーションでした。

ここからアレンジすれば、かなりいろいろなタイプに対応できるのではないかと思います。

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