JS クリックした位置から波紋がでるボタン

ボタンをクリックした時に、クリックした部分から波紋が広がる演出をつけたボタンのサンプルです。

以下のボタンをクリックしてください。

クリックした部分から波紋が広がります。

以下にクリック位置が出力されます。

このようなギミックは、複数のボタンで実装することがあると思うので、classで作成しているので量産してもそれぞれ動きます。

ボタン1

ボタン2

ボタン3

波紋はCSSで表現してます。



    /* ボタンのデフォルトのスタイル */
    .demo_btn_hamon{
        position: relative;
        overflow: hidden;
        text-decoration: none;
        display:block;
        outline: none;
        text-align: center;
    
        width: 170px;
        height: 50px;
        border-radius: 15px;
        padding: 15px;
        font-size: 16px;
        line-height: 50px;
    
        border: 1px solid #014631;
        background-color: #01be86;
        color: #014631;
     
        cursor: pointer;
        user-select: none;
    }
    
    /* ボタンの内側に擬似要素で波紋 */
    .demo_btn_hamon::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: radial-gradient(circle, #fff 10%, transparent 10%) no-repeat 50%;
        opacity: 0;
        transform: scale(10, 10);
        transition: transform 0.3s, opacity 1s;
    }
    
    /*クリックをトリガーに変化させるスタイル*/
    .demo_btn_hamon:active::after {
        transform: scale(0, 0);
        transition: 0s;
        opacity: 0.3;
    }
    .demo_btn_hamon:hover{
        color: #FFF;
    }
    
    #demo_output{
        border: solid 1px #999;
        padding: 15px;
        max-width: 170px;
        height: 200px;
        overflow-y: scroll;
    }

JSで位置を取得してCSSに反映してます。


function muuXY(e, that) {

    //xとyにクリックされた座標をセット
    if (!e) e = window.event;
    var x, y;
    if (e.targetTouches) {
        x = e.targetTouches[0].pageX - e.target.offsetLeft;
        y = e.targetTouches[0].pageY - e.target.offsetTop;
    }else if (that){
        x = e.pageX - that.offsetLeft;
        y = e.pageY - that.offsetTop;
    }

    //cssのleftとtopに値を使うため
    //クリックされた要素の半分の長さを座標から引く
    xx = x - e.target.clientWidth / 2;
    yy = y - e.target.clientHeight / 2;

    return [xx,yy];
}

//idとclassの要素の取得
const op = document.getElementById('demo_output');
const el = document.getElementsByClassName('demo_btn_hamon');

for(let i = 0; i < el.length; i++){
    el[i].onclick = function(e){

        //ボタンの中のマウスの位置を取得する。始点は要素の中央。
        var xy = muuXY(e, this);
        op.insertAdjacentHTML('afterbegin', `移動量: ${xy[0]}, ${xy[1]}<br>`);

        //ドキュメントスタイルの取得
        var sheets = document.styleSheets
        var sheet = sheets[sheets.length - 1];

        //::afterのスタイルをJSで追加する
        sheet.insertRule(
        '.demo_btn_hamon::after { left: '+xy[0]+'px; top: '+xy[1]+'px }',
        sheet.cssRules.length
        );
    }
}