「コンバージョン率」タグアーカイブ

CSSだけでバナーやボタンを,アニメーションでキラキラさせる方法

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。