では、重要な部分のコードを説明していきます。

button{
    /*とりあえずそれっぽいボタンにします*/
    width: 180px;
    height: 60px;
    font-size: 18px;
    color: white;
    background-color: blue;
    border: 2px solid #fff;
    border-radius: 12px;

    /*ここからが大事*/
    outline:none;
    position: relative;
    z-index: 1;
}

.ripple{
    /*とりあえずそれっぽいエフェクトにします*/
    width: 50px;
    height: 50px;
    background-color: #f005;
    border-radius: 50%;

    /*ここからが大事*/
    position: absolute;
    z-index: 5;
    transform: translateX(-50%) translateY(-50%);
    outline: none;
    pointer-events: none;
}

document.querySelector('button').addEventListener('click', (event)=>{
    event.currentTarget.insertAdjacentHTML('afterbegin', '<span class="ripple" style="left:' + event.offsetX + 'px;top:' + event.offsetY + 'px;"></span>')
})

(rippleクラスは、赤い円に付与されているクラスです)
JavaScriptでは、クリックに合わせて、その対象の要素(ここではbutton)の内側にrippleクラスを持ったspan要素を挿入しています。button要素は、event.currentTarget として取得しています。

ボタンに指定した outline: none; は、指定しないと、こんな感じで、青い枠線が表示されてしまいます。

次に、ボタン側に position: relative; , エフェクト側に position: absolute; を指定しています。これは、JavaScript側で、クリックイベントのoffsetの値をエフェクトの位置指定に使用していることに起因します。

ボタン側に position: relative;, エフェクト側に position: absolute; が指定されていることで、rippleクラスの top, left の基準が、bodyではなく、buttonになります。これにより、rippleクラスの left にクリックイベントの offsetX, rippleクラスの top にクリックイベントの offsetY を代入することで、要素の位置がクリック位置と一致するわけです。

ただし、これだけではクリック位置とrippleクラスの指定されたspan要素の左上が一致します。これは、CSSの位置の基準が要素の左上であるからです。そのため、要素の幅の半分だけ左に、要素の高さの半分だけ上に、位置をずらすことで、クリック位置に円の中心が一致して表示されるようになります。そして、そのためのスタイルが、transform: translateX(-50%) translateY(-50%); です。

ところが、ここで問題になってくるのが、z-index です。というのも、positionやtransformの値を設定することで、z-indexがうまくきかなくなってしまうのです。ここでは念のためz-indexを明示的に指定していますが、ここで紹介したコードをそのまま他のページに埋め込んだりすると、上手く表示されない可能性があります。

最後に、rippleクラスには、pointer-events: none; が指定されています。
これは、rippleクラスのついた要素、つまり赤い円に対し、クリックイベントを無効化するプロパティです。
これを行わないと、すでに存在していた円の上をクリックした際、その円を基準として座標が返されてしまいます。(下の要素に対するoffsetの値であっても、一番上にある要素の値が返されることを思い出してください。)

エフェクトの完成

ではいよいよ、先ほどの赤い円が表示されるボタンをさらにグレードアップして、リップエフェクトを作ってみます、先ほどのボタンに足りないのは次の要素です。

• 赤い円のボタン外の部分を非表示にする
• 時間がたつにつれて、円が大きくなりながら消えていくアニメーション

これだけで、冒頭で紹介したようなボタンが完成します。
1つめは簡単です。buttonに overflow: hidden; を指定するだけです。
では2つめはどうでしょうか。これは、CSSアニメーションを使って実装する方法が一般的です。(詳しい説明はよそ様にお願いします→CSSアニメーション 入門 )
では、作ってみます。

@keyframes rippleEffect {
    0% {
        opacity: 1;
        width: 0px;
        height: 0px;
    }

    40% {
         opacity: .3;
    }

    100% {
        opacity: 0;
        width: 100px;
        height: 100px;
    }
}

始まった直後(0%の時点)は、opacity: 1; としているので、不透明ですが、次第に透明になっていき、終了時(100%の時点)で、 opacity: 0; すなわち完全に透明になっています。さらに、それにしたがって大きさが0pxから100pxになっています。

では、このアニメーションをrippleクラスに適用します。

.ripple{
    animation-name: rippleEffect;
    animation-duration: .5s;
    animation-fill-mode:none;
}

0.5sで実行し、その後はCSSアニメーション実行の影響を受けていない状態に戻ります。よって、

.ripple{
    width: 0px;
    height: 0px
}

も合わせて指定しておくことで、0.5sたてば、大きさが0pxになってくれます。

ここまで追加したCSSをまとめます。

button{
    overflow: hidden;
}

.ripple{
    width: 0px;
    height: 0px

    animation-name: rippleEffect;
    animation-duration: .5s;
    animation-fill-mode:none;
}

@keyframes rippleEffect {
    0% {
        opacity: 1;
        width: 0px;
        height: 0px;
    }

    40% {
         opacity: .3;
    }

    100% {
        opacity: 0;
        width: 100px;
        height: 100px;
    }
}

では、赤い円を表示していたボタンにこれらを追加します。

See the Pen Ripple Effect Final by NumLocker (@numlocker-japan) on CodePen.