[CSS]楽しい動きが満載！ボタンや画像用の40種類以上のホバーエフェクトがまとめられたスタイルシート -Hover.css
Post on:2014年1月7日
sponsors
ボタンやロゴや画像にclassを加えるだけで簡単に利用できるホバーエフェクトがまとめられたスタイルシート（SASSも有り）を紹介します。
40種類以上のCSS3アニメーションは、見てるだけでも楽しいです。
Hover.cssの使い方
使い方は非常に簡単です。
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
<head>
<link href="css/hover-min.css" rel="stylesheet">
</head>
一部のエフェクトだけを使用したい場合は、そのスタイルだけコピペすればOK!
Step 2: HTML
あとは、ボタンやロゴや画像にclassを指定するだけで、さまざまなホバーエフェクトが利用できます。
<a class="button grow">Add to Basket</a>
buttonのclassは、下記のデモ用の簡単なボタンのスタイルが定義されているだけです。
Hover.cssのデモ
実装は非常に簡単なので、デモを掲載してみました。
カテゴリは、2Dの変形、borderを使ったエフェクト、シャドウとグロウのエフェクト、吹き出し状、カールの5つです。
2D Transforms
Border Transitions
Shadow and Glow Transitions
Speech Bubbles
Bubble Top
Bubble Right
Bubble Bottom
Bubble Left
Bubble Float Top
Bubble Float Right
Bubble Float Bottom
Bubble Float Left
Curls
sponsors
