【初心者〜中級者向け】CSSで作るリッチなホバーエフェクトボタン

今回はCSSだけで作れるリッチなホバーエフェクトボタンを作ってみました。
なぜホバーエフェクトが必要か？

それはユーザーがサイトを回遊する際の「使いやすい」、「このサイト面白い」、「こだわってるサイト」というがわかりやすく体験できるようにするためです。サイトの内容が一番重要ですが、見てもらうために気持ちよく回遊できるようにするのはUXの向上のためには必須と言えるでしょう。

その一つがホバーエフェクトになります。

それでは、全20個のホバーエフェクトボタンのDEMOから御覧ください。

全ボタンのデモ

ボタンを１つづつ解説

1-1.線から塗り

1-2.塗りから線

1-3.中央から円が広がる

1-4.左上から円が広がる

1-5.右下から円が広がる

1-6.上から幕が降りる

1-7.下から幕が上がる

1-8.左から色が広がる

1-9.右から色が広がる

1-10.四角から角丸

1-11.角丸から四角

1-12.線と文字色が変わる

1-13.影が無くなる

1-14.影が出てくる

1-15.拡大する

1-16.線が太くなる

1-17.キラリと光る線が出てくる

1-18.隅から円が広がる

1-19.両側から扉が閉まる

1-20.上下から扉が閉まる

まとめ

いかがでしたでしょうか。
よりユーザーのサイト回遊をしやすい、サイトの質を上げるためにはまずはCSSだけで実装できるホバーエフェクトを作ってみてはいかがでしたでしょうか？
今回紹介したホバーエフェクトの他にも自分だけの、またサイトに沿ったエフェクトを作ってみると作っている自分自身も面白く、またユーザーも満足してもらえると思います。