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.offsetTopread-only property returns the distance of the outer border of the current element relative to the inner border of the top of theoffsetParent, the closest positioned ancestor element.
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