JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<span type="button" color="red">Cancel</span>
<span type="button">Later</span>
<span type="button" color="dodgerblue">Acept</span>
<cursor id="xc"></cursor>

CSS

html{
  margin: 0;
  padding: 50px;
  width: 100%;
  height: 100%;
  cursor: none;
  user-select: none;
  font-family: helvetica;
}

svg{
  position: absolute;
}

cursor{
  background: #869094;/*dodgerblue;*/
  border-radius: 10px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0.8;
}

cursor.cast{
  transition: all 0.1s ease-in;
  opacity: 0.3;
}

html:active cursor.cast{
  opacity: 0.4;
}

span[type="button"]{
  padding: 8px 10px;
}

JavaScript

window.addEventListener('mousemove', cursor);

window.addEventListener('mousedown', () => {
  xc.style.transform += " scale(0.9)"
});
window.addEventListener('mouseup', () => {
  xc.style.transform = xc.style.transform.replace(" scale(0.9)", "")
});

let inter, gocus = false;

document.querySelectorAll('[type="button"]').forEach((e) => {
  e.addEventListener('mouseenter', oncast);
  e.addEventListener('mouseleave', offcast);
});


function cursor(e) {
  /*xc.style.top = (e.clientY - 10) + "px";
  xc.style.left = (e.clientX - 10) + "px";*/

  xc.style.transform = "translate(" + (e.clientX - 10) + "px, " + (e.clientY - 10) + "px)";
}

function oncast(e) {
  clearInterval(inter);
  let current = e.currentTarget;
  inter = setTimeout(() => {
    window.removeEventListener('mousemove', cursor);
    xc.className = "cast";
    /*xc.style.top = current.offsetTop + "px";
  xc.style.left = current.offsetLeft + "px";*/
    xc.style.transform = "translate(" + current.offsetLeft + "px, " + current.offsetTop + "px)";
    xc.style.background = current.getAttribute('color');
    xc.style.width = current.offsetWidth + "px";
    xc.style.height = current.offsetHeight + "px";
    gocus = true;
  }, (gocus) ? 0 : 70, current);

}

function offcast(e) {
  xc.style.width = "20px";
  xc.style.height = "20px";
  /*xc.style.top = (e.clientY - 10) + "px";
  xc.style.left = (e.clientX - 10) + "px";*/
  xc.style.transform = "translate(" + (e.clientX - 10) + "px, " + (e.clientY - 10) + "px)";
  clearInterval(inter);
  inter = setTimeout(() => {
    xc.className = "";
    xc.style.background = "#869094";
    window.addEventListener('mousemove', cursor);
    gocus = false;
  }, 120);

}