サイトを印象付けるホバーアニメーションまとめ
もくじ
シンプル・分かりやすい・綺麗
● ボタンの色が反転する
button
● 字間が広がる
button
● 浮き上がる
button
● ズーム[バナー]
● 色が付く+テキスト[バナー]
ポップ・勢いがいい
● 押下
button
● スライド
● スライド 斜め
● 迫る
button
スタイリッシュ・かっこいい・スピーディー
● グラデーションが切り替わる
button
● ズレ
button
● 縮小[バナー]
● ラインが引かれる[テキスト]
ホバーしてください
● ラインが引かれる：センター[テキスト]
ホバーしてください
● マーカー[テキスト]
ホバーしてください
かわいい・柔らかい
● 中央から背景色が変わる
button
● ブラー[バナー]
※ IEではfilterが非対応のため、別のホバー効果を合わせて付けておくとよいです。
今回はホバー時にボックスシャドウを付けています。
● 丸くなる[バナー]
組み合わせ例
● 【例01】反転 + 字間
button
● 【例02】反転 + 迫る
button