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

  • 公開日:2016.10.03
  • 更新日:2020.04.23
  • 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

参考にしたサイト

 

Cordingカテゴリの最新記事