CSSだけで、jQueryもJavaScriptも使わずにバナーをキラキラしたアニメーションで修飾しよう
必要なもの
・button.css
・fontセット font-awesome.zip
DL元：fontawesome.io
↓まとめてダウンロード↓
・デモセットのダウンロード
記述例
HTML
<head>と</head>の間で、cssとフォントを呼び出す。
バナーを表示したい場所に、下記の記述を。
これだけ。
「#」は、リンク先を指定すること。
青いバナー、キラキラ、矢印が動くバナーはこんな感じで↓
青いバナー、キラキラ、矢印が動くバナーのデモはこちら。
バナー修飾のクラス(class)解説
| クラス名(記述) | 説明 |
| btn-yuya | 基本クラス(色指定しなければ緑) |
| is-red | 赤色バナー |
| is-blue | 青色バナー |
| is-black | 黒色バナー |
| is-reflection | キラキラ |
| is-trembling | バナー右の矢印を動かす |
| is-bounce | バウンド |
| is-purun | ぽよぽよ動く |
赤色で、全てのクラスを指定して動かすアニメーションバナーのデモはこちら
カスタマイズ
バナーのサイズ、フォントの大きさ、バナーの色やグラデーションをカスタマイズするには、 button.css の各クラスの部分をカスタマイズすればOK。