CSS3で点滅するボタンを作る

動くボタンだとクリック率が上がるデーターもあるようで、やはりボタンはアピールできた方が良いようです。

アフェリエイトリンクをボタンで設置するとき、ＡＳＰのコードの改変ができないのでちょっと困ることがあります。
自由テキストが認められていれば良いのですが、それがない場合、
・メール用のリンクを使う
・非承認のリスクを承知で改変してして使う
などして、画像やGIFアニメのボタンなどを使っていることも多いようです。

CSS3を使えばアニメーションも相当いろいろできるようですが、断片的な情報しか見つからず、点滅するボタンをコピペで設置できる情報は意外にありませんでした。

それでもなんとか拾い集めた情報で、色が少しだけ変わるボタンを作りました。

参考
http://www.will-hp.com/wpblog/web/72/
http://affiliate150.com/link-button

html



公式サイトはこちら
CSS

.kousiki {

    text-align:center; /*ボタンの中央配置 */

    margin:0px auto 0px auto;  /*ボタンの上右下左の余白 */

    max-width: 400px;  /*ボタンの横幅 */

    text-align: center;  /*ボタン内の文字中央寄せ */

    padding: 10px;  /*ボタン内文字の余白 */

    background-color: #FF1493;  /*ボタンの背景色 */

    margin-right: auto;

    margin-left: auto;

    border-radius: 5px;  /*ボタンの角を少し丸く */

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    font-weight: bold;  /*ボタン内文字は太字 */

    font-size: 130%;

    color: #ffffff !important;  /*ボタン内の文字色 */

   height: 55px;
/* 点滅 */
    -webkit-animation:blink 0.5s ease-in-out infinite alternate;

    -moz-animation:blink 0.5s ease-in-out infinite alternate;

    animation:blink 0.5s ease-in-out infinite alternate;

}

@-webkit-keyframes blink{

    0% {opacity:0.8;}

    100% {opacity:1;}

}

@-moz-keyframes blink{

    0% {opacity:0.8;}

    100% {opacity:1;}

}

@keyframes blink{

    0% {opacity:0.8;}

    100% {opacity:1;}
}
.kousiki a {

 text-decoration: none !important;  /*ボタン内テキストリンク下線無し */

 color: #ffffff !important;  /*ボタン内の文字色 */

 display: block;

}