ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。
ボタンの背景にGifアニメを置く方法もありますが、CSSで十分に対応が可能です。
以下がサンプルです。
デフォルトでアニメーションをセットしたサンプル
ボタン
押された時にアニメーションが開始するサンプル
ボタン2
HTMLはこちら
<div class="demo_btn"><span class="demo_bg"></span>ボタン</div> <div class="demo_btn" id="demo_click"><span></span>ボタン2</div>
CSS
.demo_btn{ display: block; width: 200px; max-width: 100%; margin: 0 auto; overflow: hidden; position: relative; border: solid 1px #CCC; border-radius: 5px; font-size:12px; text-align: center; padding: 3px 0; margin: 20px auto; cursor: pointer; z-index: 1; } .demo_btn .demo_bg{ display: block; position: absolute; z-index: -1; top: 0; right: 0; width: 100%; height: 200%; background-color: #FDD; animation: act_wave 0.18s infinite alternate; } @keyframes act_wave { 0% { top: 50%; } 100% { top: 100%; } }
押されたときの操作はjQueryで実装しています
JS
$("#demo_click").on("click",function(){ $(this).find("span").toggleClass("demo_bg"); });