WEBサイト制作

ショッピングサイト制作

システム開発

コンテンツ制作

TORATについて

制作の流れ

プライバシーポリシー

お問い合わせは
こちらから

TOP

【第一弾】コピペだけ!CSSで実装できるホバーデザイン集

2020年03月12日

投稿者: ヨッシー

みなさん、こんにちは! 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サイトを制作してみてくださいね!

この記事の投稿者

フロントエンドエンジニア

ヨッシー

プロフィール情報

2020年3月12日 ナタリア

久しぶりにie6でレイアウトが崩れたので復習

2011年5月4日 TORAT

2020年5月7日 アンディ

サイトのバックリンクを確認する

2010年10月20日 TORAT

ブログ一覧へ

書いた人

WRITERS