【CSS3】CSSだけで実装できるホバーエフェクト15選

ボタンのホバーエフェクトってたくさんあって迷いませんか？
私は迷って結局いろんなサイトをうろうろうろうろ決まらない…なんてことをよくやっています笑

今日はもう今後迷わないようにCSS3だけで作るホバーエフェクトたちをCodePenから探してきました。
少しでもお役に立てばいいなと思います。

Hover.css

See the Pen Hover.css by Ian Lunn (@IanLunn) on CodePen.0

ボタンにホバーしたときに文字の通りに動いてくれます。

Button Hover Effects

See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen.0

ワンポイントで入れてみるとよさそうですね。おしゃれです。

CSS Button

See the Pen CSS Buttons by Nitish tyagi (@nikkk-me) on CodePen.0

ホバーすると吹き出しが出ます。リンク先の補足を入れたりするのにいいですね。ボタンのデザインもシンプルです。

a cool shiny hover effect button

See the Pen a cool shiny hover effect button by laurent (@camponogara) on CodePen.0

その名の通りホバーするとシャイニーになります。キラーン。

Animated ＆ Hover Effect Buttons

See the Pen Animated & Hover Effect Buttons by Joshua (@Eruedraith) on CodePen.0

結構使いやすいデザインと動きなのではないでしょうか。ホバーすると動くだけではなく、アニメーションまでついてます。

Pure CSS3 Vertical menu with nice hover effect

See the Pen Pure CSS3 Vertical menu with nice hover effect by Jitendra (@berdejitendra) on CodePen.0

メニューで使えるホバーエフェクトです。最近はPCサイトでもスマホと同じようなメニューの見せ方をするサイトが増えてますので、こういうのも参考に良いのではないでしょうか。

CSS3 Hover Effect using :after Psuedo Element

See the Pen CSS3 Hover Effect using :after Psuedo Element by Larry Geams Parangan (@larrygeams) on CodePen.0

上に同じくですね。カラフルで少しシンプルです。Googleのような色使いが可愛いですね

Css Hovered Button

See the Pen Css Hovered Button by Enes Sefa (@EnesSefaK) on CodePen.0

こちらはホバーすると文字が切り替わるタイプのボタンみたいですね。動きが斬新でおもしろいです。

HubSpot Hover Effect Button

See the Pen HubSpot Hover Effect Button by Joe Henriod (@joehenriod) on CodePen.0

ポップなデザインに合いそうな動きをしてくれます。海外のサイトで多そうなイメージです。

button

See the Pen button by Elena (@semenchenko) on CodePen.0

心臓の鼓動のような動きをしてます。お問い合わせボタンなんかで使ったら面白そうですね。

Press Me!

See the Pen qxqRbR by peter barry (@grend) on CodePen.0

ホバーするとボタンの左上から「press me!」と文字が。非常に可愛いらしいボタンです。

Hover Button Shadow Animation

See the Pen Hover Button Shadow Animation by Kevin Kipp (@third774) on CodePen.0

ミニマルなデザインに合いそうなシンプルなボタン。シャドウが絶妙です。

SocialHover buttons

See the Pen SocialHover buttons by Mohamed Abo ElGhranek (@midoghranek) on CodePen.0

SNSアイコンのボタンです。ホバーすると吹き出しが出ます。

Avengers 2

See the Pen Avengers 2 by Nikolay Talanov (@suez) on CodePen.0

他のボタンとはずいぶん毛色が違いますが笑
ホバーすると背景の色が変わります。

The handbook download animation

See the Pen The handbook download animation by Yancy Min (@yancy) on CodePen.0

未来感のあるホバーエフェクト。全体的にちょっと角度がついてるのもポイントです。