用途
新着
履歴
分類

CSS 背景が波打つボタン

CSS 背景が波打つボタン
ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。

ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。

ボタンの背景に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");
    });
公開 2021-02-23 13:43:13
更新 2021-02-23 13:50:02
このページの二次元コード
CSS 背景が波打つボタン

人気のサンプル

search -  category -  about
© 2024 kipure
Top