You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

23 lines
631 B

const buttons = document.querySelectorAll('.ripple')
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'
this.appendChild(circle)
setTimeout(() => circle.remove(), 500)
})
})