読者です 読者をやめる 読者になる 読者になる

TakayukiKoyama Geek Blog

Create, Entertain, Experience

ボタンにマウスを乗せた時のアニメーションCSSが簡単に作れるHover.css

CSS デザイン

HTMLのaタグにマウスを乗せたときの操作はa:hoverのCSSで記述できますが、アニメーションを作るのはちょっと面倒です。そういうときに便利なのがHover.css

 Hover.css - A collection of CSS3 powered hover effects

 GitHubIanLunn/Hover

アニメーションの種類が豊富

f:id:tkoyama1988:20141009015205p:plain

 サイトを見てもらえれば分かりますが、「Push」や「Pop」、「Rotate」に「Wobble」などすごくたくさんのアニメーションを使うことができます。

使い方

 まずはここからダウンロード。

 cssフォルダのhover.cssもしくはhover-min.cssを取り出す。

 HTMLファイルのheadタグに下記のようにhrefパスを調整します。

<link href="css/hover.css" rel="stylesheet" media="all">

 あとは、aタグのclassにアニメーション名を指定すれば完成。

<a class="button grow">テスト</a>

サンプル GrowとPush

 Grow(膨らむ)

 Push(押される)

 GrowとPushを試してみた。本当に簡単。因みに、はてなブログの場合CSSファイルをそのまま読み込めないっぽい(知らないだけ?)ので、「デザイン」>「カスタマイズ」>「デザインCSS」にmin.cssをそのまま貼り付けました。