JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<button class="button">
  button
  <span class="button__shadow" role="presentation" aria-hidden="true"></span>
</button>

SCSS

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.button {
  background: #eee;
  border: #eee;
  border-radius: 4px;
  padding: 8px 16px;
  position: relative;
  overflow: hidden;

  &__shadow {
    pointer-events: none;
    position: absolute;
    width: 0;
    height: 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 100ms ease-in-out;
  }

  &.--clicked {
    .button__shadow {
      opacity: 1;
      width: 50px;
       height: 50px;
    }
  }
}

JavaScript

const button = document.querySelector('.button');
const shadow = button.querySelectorAll('.button__shadow')[0];

button.addEventListener('mousedown', (e) => {
  button.classList.add('--clicked');
  shadow.style.left = `${(e.clientX - e.target.offsetLeft)}px`
  shadow.style.top = `${(e.clientY - e.target.offsetTop)}px`
})

button.addEventListener('mouseup', () => {
  button.classList.remove('--clicked')
})