When you click the button a ripple effect apeared on the button and its expands up to the end.

The construction starts with a event listener which is listening the click inside the buttont. When the button is clicked two constants are created. The x and y that works as the point where is clicked. This is possible because the MouseEvent: clientX property

Once we have this value we look for the offset top and offset left. For that we use the offsetTop property:

The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent, the closest positioned ancestor element.

HTMLElement: offsetTop property

At the end we only add the proper style:

buttons.forEach(button => {
    button.addEventListener('click', function (e) {
        const x = e.clientX
        const y = e.clientY

        const buttonTop = e.target.offsetTop
        const buttonLeft = e.target.offsetLeft

        const xInside = x - buttonLeft
        const yInside = y -buttonTop

        const circle = document.createElement('span')
        circle.classList.add('circle')
        circle.style.top = yInside + 'px'
        circle.style.left = xInside + 'px'

        circle.style.top = this.appendChild(circle)

        setTimeout(() => circle.remove(), 500)
    })
})

You can see the code in this GitHub Repository: 20.button_ripple and the demo of the project is here: Button Ripple