2014/09/19

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40種類以上のホバーエフェクトをCSSだけで簡単に実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」
「Hover.css」は40種類以上のホバーエフェクトをCSSだえけで簡単に実装できるCSSライブラリーです。
早速、使い方を見て行きましょう。

Hover.Cssの使い方

GitHubから、css > hover.cssもしくはhover-min.cssをダウンロードします。
ダウンロードしたCSSファイルを、当該サイトに読み込みます。

[html]
<link href="css/hover.css" rel="stylesheet">
[/html]

これで準備が整いました。
あとは、エフェクトを実装したい要素のクラス名にbtnを加え、40種類あるエフェクトのなかから、実装したいエフェクトを選び、クラス名に追加するだけです。
たとえば、カーソルを載せたときに、ふわりと浮いて影ができるエフェクトを実装したい場合は以下のようになります。

[html]
<a href="#" class="btn hover-shadow">SUBMIT</a>
[/html]

これで実装完了です。
簡単ですよね。

エフェクトと対応するクラス名一覧

Hover.Cssで実装できるエフェクトとクラス名の一覧です。
ご参考にどうぞ。

2D Transforms

[html]
<a href="#" class="button grow">Grow</a>
<a href="#" class="button shrink">Shrink</a>
<a href="#" class="button pulse">Pulse</a>
<a href="#" class="button pulse-grow">Pulse Grow</a>
<a href="#" class="button pulse-shrink">Pulse Shrink</a>
<a href="#" class="button push">Push</a>
<a href="#" class="button pop">Pop</a>
<a href="#" class="button rotate">Rotate</a>
<a href="#" class="button grow-rotate">Grow Rotate</a>
<a href="#" class="button float">Float</a>
<a href="#" class="button sink">Sink</a>
<a href="#" class="button hover">Hover</a>
<a href="#" class="button hang">Hang</a>
<a href="#" class="button skew">Skew</a>
<a href="#" class="button skew-forward">Skew Forward</a>
<a href="#" class="button skew-backward">Skew Backward</a>
<a href="#" class="button wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="button wobble-vertical">Wobble Vertical</a>
<a href="#" class="button wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="button wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="button wobble-top">Wobble Top</a>
<a href="#" class="button wobble-bottom">Wobble Bottom</a>
<a href="#" class="button wobble-skew">Wobble Skew</a>
<a href="#" class="button buzz">Buzz</a>
<a href="#" class="button buzz-out">Buzz Out</a>
[/html]

Border Transitions

[html]
<a href="#" class="button border-fade">Border Fade</a>
<a href="#" class="button hollow">Hollow</a>
<a href="#" class="button trim">Trim</a>
<a href="#" class="button outline-outward">Outline Outward</a>
<a href="#" class="button outline-inward">Outline Inward</a>
<a href="#" class="button round-corners">Round Corners</a>
[/html]

Shadow and Glow Transitions

[html]
<a href="#" class="button glow">Glow</a>
<a href="#" class="button box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="button box-shadow-inset">Box Shadow Inset</a>
<a href="#" class="button float-shadow">Float Shadow</a>
<a href="#" class="button hover-shadow">Hover Shadow</a>
<a href="#" class="button shadow-radial">Shadow Radial</a>
[/html]

Speech Bubbles

[html]
<a href="#" class="button bubble-top">Bubble Top</a>
<a href="#" class="button bubble-right">Bubble Right</a>
<a href="#" class="button bubble-bottom">Bubble Bottom</a>
<a href="#" class="button bubble-left">Bubble Left</a>
<a href="#" class="button bubble-float-top">Bubble Float Top</a>
<a href="#" class="button bubble-float-right">Bubble Float Right</a>
<a href="#" class="button bubble-float-bottom">Bubble Float Bottom</a>
<a href="#" class="button bubble-float-left">Bubble Float Left</a>
[/html]

Curls

[html]
<a href="#" class="button curl-top-left">Curl Top Left</a>
<a href="#" class="button curl-top-right">Curl Top Right</a>
<a href="#" class="button curl-bottom-right">Curl Bottom Right</a>
<a href="#" class="button curl-bottom-left">Curl Bottom Left</a>
[/html]

Hover.css