ボタンにホバーエフェクトを付けてみよう

ボタンをホバーした時に動きがつくと、マウスオーバーした時に変化があるため、ユーザーにボタンの存在をさらにわかりやすくしたり、アピールすることができます。

やり過ぎは禁物ですが、少し変わった動きがあると面白いと思ってもらえたり、つい何度もマウスオーバーしたくなるなど、作る側・見る側共に楽しいという魅力もあります。

ホームページを作る際、Web制作って楽しい！と感じながら制作するのも大切ですよね。

CSSだけで作れるボタンのホバーエフェクトのサンプルをいくつか作ってみましたので、サイト制作の際の参考にしてみてください。

線ボタン → 塗りボタン

See the Pen
sen-nuri by asobi-lab (@asobi-lab)
on CodePen.

塗りボタン → 線ボタン

See the Pen
nuri-sen by asobi-lab (@asobi-lab)
on CodePen.

左側から色が塗られる

See the Pen
left-right by asobi-lab (@asobi-lab)
on CodePen.

右側から色が塗られる

See the Pen
right-left by asobi-lab (@asobi-lab)
on CodePen.

両側から色が付く

See the Pen
ryouside-nuri by asobi-lab (@asobi-lab)
on CodePen.

上下から色が付く

See the Pen
up-down by asobi-lab (@asobi-lab)
on CodePen.

ボタンが拡大

See the Pen
big by asobi-lab (@asobi-lab)
on CodePen.

影が出てくる

See the Pen
shadow by asobi-lab (@asobi-lab)
on CodePen.