TORAT
みなさん、こんにちは！ TORATのよっしーです！
今回はWEBデザインに必要不可欠なマウスオーバーのデザインをいくつかご紹介させていただきます。 リンクボタンをマウスオーバー（カーソルを置く）した際に、色やスタイル、大きさなどを変化させたり、 CSSだけで様々な動きを加えることができます。簡単に実装できますので、ぜひWEBサイトに使用して ユーザビリティ をアップさせましょう！
カラーチェンジ
マウスオーバーすると一瞬で色が変わります
See the Pen gOpvdNE by ヨッシー (@yoshida123) on CodePen.
プッシュアップ
マウスオーバーすると上にあがります
See the Pen abOqRoL by ヨッシー (@yoshida123) on CodePen.
プッシュダウン
マウスオーバーするとボタンを押したように下がります
See the Pen RwPQYXq by ヨッシー (@yoshida123) on CodePen.
プッシュタイプ
クリックするとボタンが下がります
See the Pen wvayYwV by ヨッシー (@yoshida123) on CodePen.
ボーダータイプチェンジ
マウスオーバーすると線のタイプが変わります
See the Pen YzXeJzJ by ヨッシー (@yoshida123) on CodePen.
スローチェンジ
マウスオーバーすると徐々に色が変化します
See the Pen rNVJqam by ヨッシー (@yoshida123) on CodePen.
ボーダーカラーチェンジ
マウスオーバーすると線の色が変わります
See the Pen wvayYKw by ヨッシー (@yoshida123) on CodePen.
グラデーション
マウスオーバーするとグラデーションがスタートします
See the Pen qBdxJNK by ヨッシー (@yoshida123) on CodePen.
コーナーチェンジ
マウスオーバーするとが角が変化します
See the Pen ExjQdgo by ヨッシー (@yoshida123) on CodePen.
リフレクション風
マウスオーバーするとガラスに反射したようなエフェクトがかかります
See the Pen dyodgOg by ヨッシー (@yoshida123) on CodePen.
サイドチェンジ
マウスオーバーすると色がサイドからサイドに移動します
See the Pen oNXEaZa by ヨッシー (@yoshida123) on CodePen.
フォントワイドアップ
マウスオーバーするとフォントが広がります
See the Pen zYGRmZp by ヨッシー (@yoshida123) on CodePen.
フォントロール
マウスオーバーするとフォントが縦回転します
See the Pen mdJXzMZ by ヨッシー (@yoshida123) on CodePen.
サイズアップ
マウスオーバーするとサイズが大きくなります
See the Pen ZEGrqoa by ヨッシー (@yoshida123) on CodePen.
サイズダウン
マウスオーバーするとサイズが小さくなります
See the Pen ZEGrqqv by ヨッシー (@yoshida123) on CodePen.
アピールデザイン
マウスオーバーするとサイズが大小で変化します
See the Pen RwPQeMX by ヨッシー (@yoshida123) on CodePen.
ライトスプレッド
マウスオーバーすると光が広がります
See the Pen bGdLmxw by ヨッシー (@yoshida123) on CodePen.
いかがでしたでしょうか。
好きなホバーエフェクトはありましたか？こういったアニメーションはクリック率アップなどに効果的ですのでぜひ積極的に使っておしゃれで面白いWEBサイトを制作してみてくださいね！
