JSFiddle - React, Tailwind, and code Playground

by darkylmnx

HTML

<div>
  <div>
    <div>
      <button>
        hello
      </button>
    </div>
  </div>
</div>

CSS

div {
  position: relative;
  padding: 5px;
  background: rgba(0,0,0,0.3);
}

button {
  position: absolute;
  top: 40px;
  left: 40px;
  display: block;
  width: 200px;
  height: 100px;
  background: pink;
  border: 0;
}

JavaScript

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

b.addEventListener('click', (event) => {
	event.preventDefault();
  
  const AB = Math.max(
  	b.offsetWidth - event.offsetX,
    event.offsetX
  );
  
  const BC = b.offsetHeight;
  
  const AC = Math.sqrt(AB * AB + BC * BC) * 2;
  
  const r = document.createElement('div');
 
 	r.style.width = 0;
  r.style.height = 0;
  r.style.background = 'red';
  r.style.borderRadius = '50%';
  r.style.position = 'absolute';
  r.style.top = '50%';
  r.style.left = '50%';
  r.style.transform = 'translate(-50%, -50%)';
  r.style.transition = 'all 0.4s';
  
  r.addEventListener('transitionend', () => {
  	r.remove();
  })
  
  b.appendChild(r);
  
  setTimeout(() => {
  	r.style.width = AC + 'px';
  	r.style.height = AC + 'px';
  });
});