2015/01/07

CSSだけでホバーエフェクトが実装できる!Hover.cssの使い方

CSSだけでホバーエフェクトが実装できる!Hover.cssの使い方

ホバーエフェクトがまとめられたスタイルシートをご紹介します。
全部で49種類用意されており、エフェクトを追加したい要素にclassを追加するだけで簡単に実装できます。

目次

ダウンロード

http://ianlunn.github.io/Hover/

使い方

CSSを読み込む

外部ファイルとして「hover-min.css」を読み込みます。

<head>
  <link href="css/hover-min.css" rel="stylesheet">
</head>

HTML

ホバーエフェクトを実装したい要素にclassを指定します。

<a class="button grow">Grow</a>
<a class="button shrink">Shrink</a>

デモ

2D Transforms

Border Transitions

Shadow and Glow Transitions

Speech Bubbles

Curls

まとめ

素敵なホバーエフェクトがこんなに簡単に実装できてしまいます。是非お試し下さい!