JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<button>Home</button>

SCSS

html, body {
  height: 100%;
}

button {
  --background-width: 50%;
  --background-pos-x: 20%;
  --background-pos-y: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  padding: 30px 60px;
  font-size: 16px;
  border: 1px solid #000;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at var(--background-pos-x) var(--background-pos-y), rgba(255,102,0,1) 0%, rgba(255,102,0,1) var(--background-width), rgba(255,102,0,0) var(--background-width), rgba(255,102,0,0) 100%);
  /* background-size: 100% 100%; */
  background-repeat: no-repeat;
  &:hover {
    /* background: rgb(255,102,0); */
    
  }
}

JavaScript

const button = document.querySelector('button');
button.addEventListener('mousemove', function(e) {
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; //x position within the element.
	var y = e.clientY - rect.top;  //y position within the element.
  console.log("Left? : " + x + " ; Top? : " + y + ".");
  e.target.style.setProperty('--background-pos-x', `${x}%`);
  e.target.style.setProperty('--background-pos-y', `${y}%`);
})