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