マウスを乗せた時にチョロっと変化するホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」は利用価値あり!

マウスオーバー
 
今はスマホやタブレットが主流になり、昔ながらのマウス操作は減少していくのかも知れませんが、PCから見る方用にも何か面白みが欲しいですよね。
 
そんな時、「Hover.css」というマウスホバー時のCSSエフェクト集があるのを知りました。
 
この「Hover.css」はボタンなどの上にカーソルが来た時、手軽にエフェクトを追加することが出来てめっちゃ便利だったのでご紹介したいと思います。
 
 
例えばこんな感じ。
下記のボタンにカーソルを乗せてみてください。
 
がちょ〜ん 閉店ガラガラ〜 ぴゅ〜〜ん 浮きま〜す いや〜〜ん
 

使い方はボタンだけに限らず

 
この「Hover.css」の素晴らしい点はボタンにアクションを付けられるだけでなく、文字だけのリンクや画像にも同様のアクションが起こせるのです。
 

まずは下記のような通常の文字リンク

 
ガクブルがくぶる
 
上記のリンク部分にカーソルを乗せるとガクブルと震えちょっと面白い感じですよね。しかし、ソース部分を見るとかなりスッキリとしているのがわかります。AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで簡単にこのような効果を生み出せてしまうのです。
 
それでは次に下のイケメンが写っている画像にカーソルを乗せてみてください。

 
秋葉仁

視聴者さん
テメー!  キモイ画像見せるな!
俺の気分がガクブルじゃ〜
秋葉仁
すごく簡単だし   いい感じでしょ〜

 

「Hover.css」が使えるように準備しよう!

 

車掌秋葉仁

「Hover.css」がいかに簡単に使え、いかに便利か伝わりましたでしょうか?
 
それでは利用までの手順を見ていきましょう。

Hover.cssのダウンロード

 
hover
 
 
まずは「Hover.css」というサイトにいき、downloadボタンを押します。
 
 
hover3
 
 
ダウンロードした「Hover-master.zip」というファイルを解凍し、中にある「css」フォルダをそのまま wordpress のテーマフォルダー直下などに FTPアップロードします。
 
 

Hover.cssのダウンロードを使えるようにする

 
 
通常のサイトの場合の呼出し

 
 
Wordpressテーマでの呼出し(header.php)

 
 
必要な時だけ記事からの呼出し

 
 

車掌秋葉仁

さ〜準備は整いました!
 
あとはHTML要素を記入して、Hover.cssにあるクラスを記入するだけです。
下に「Hover.css」のすべてではないのですが、クラス名とボタン効果を載せてあるので、参考にして頂ければと思います。

 

2次元変化

 

 
 
Grow Shrink Pulse Pulse Grow
 Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out
 

背景変化

 
 

 
 
Fade Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical
 

ボーダー変化

 
 

 
 
Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right
 
 

影・ぼかし変化

 
 

 
 
Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset
 
 

カール

 
 

 
 
Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left
 
 

ボタンCSSを作るなら

 
 
hover4
 
 
ぼくがボタンを作る時に多く利用しているサイト「Button Maker」は使いやすくてオススメです。
 
 
 

車掌秋葉仁

いかがでしたでしょうか?
 
ボタンや画像にちょっとした遊び心を持たせるのもいいですよね。
 
スマホやタブレットではわかりにくいのかもしれませんが…PC閲覧の特典って感じかな?
 
参考になりましたでしょうか?
ではまた!

 
 
 

HOME

管理人

秋葉仁

秋葉原で生まれて育ち、会社も秋葉原で設立し、店舗も秋葉原という秋葉原だけの生活。そんな秋葉 仁は大の機械ヲタク。 ビデオカメラ、デジタルカメラ、撮影機材、DJ機材、そしてPC!とにかく機械ならば何でもいい状態。 そんな機械ヲタクが YouTube などを使い様々な機械を紹介。 少しでも購入前の検討材料になれば幸いです。 ぜひともよろしくお願い致します。

カラーコード表

月別

秋葉のおすすめ