Cording

マウスオーバー時の挙動100種類以上!Hover.css

「マウスオーバー時の挙動に少しこだわりたい」
そんなクライアントのご要望にお応えできそうな、CSS3のライブラリ[Hover.css]

Hover.css には、エフェクトのスタイルのみ記述されており、
ボタンのベースのスタイルはありませんので、
ボタンのベーススタイルはあらかじめ指定しておく必要があります。

例えば下記のような感じに。

.button {
border-top: 1px solid #96d1f8;
background: #65a9d7;
padding: 5px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 18px;
text-decoration: none;
vertical-align: middle;
}

head内にhover.cssを読み込んで、
ボタンタグにhover.cssのエフェクト名をclassを追加するだけでエフェクトをつけられます。


Button

ScreenshotDownload & demo

Download & demoもあります

URL
TBURL

Leave Comments

*
*
* (公開されません)

※日本語が含まれない投稿は送信できませんので、ご了承くださいませ。

Category List

Return Top