.button Click Me

body
  background: radial-gradient(circle, lighten(aquamarine, 15%), aquamarine)
  background-repeat: no-repeat
  width: 100vw
  height: 100vh
  display: flex
  flex-flow: row nowrap
  justify-content: center
  align-items: center

.button
  font-family: 'Bungee', cursive
  font-size: 1.2rem
  position: relative
  text-transform: uppercase
  font-weight: bold
  letter-spacing: 1px
  cursor: pointer
  background: palevioletred
  border: 2px solid darken(palevioletred, 15%)
  padding: 30px 60px
  border-radius: 45px
  color: white
  overflow: hidden
  box-shadow: 0 2px 4px darkgray
  transition: all 0.2s ease-in
  z-index: 1
  
  .circle
    position: absolute
    border-radius: 50%
    pointer-events: none
    background:
      image: radial-gradient(circle closest-side, white, lighten(palevioletred, 15%))

    width: 1px
    height: 1px
    z-index: 3
    animation:
      name: ripple
      duration: 0.5s
      timing-function: ease-in
  
  &:hover
    transform: scale(1.01)
    box-shadow: 0 6px 4px darkgray

@keyframes ripple
  0%
    transform: scale(0, 0)
    opacity: 0
  75%
    transform: scale(450, 450)
    opacity: 0.75
  100%
    transform: scale(700, 700)
    opacity: 0

const button = document.querySelector('.button')

function materializeEffect(event){
  const circle = document.createElement('div')
  const x = event.layerX
  const y = event.layerY
  circle.classList.add('circle')
  circle.style.left = `${x}px`
  circle.style.top = `${y}px`
  this.appendChild(circle)
}

button.addEventListener('click', materializeEffect)