Circle follow cursor after hover on button

Question

I'm trying to remake hover like on this website:

https://www.samsaraubud.com/

When you hover over a button (and only button. I don't want circle over whole website), a circle appers around cursor. I tried so many solutions from codepen after typing "mouse follow" but nothing works.

I have button like this:

https://codepen.io/Aventadorrre/pen/mdyPJbv

body {
  padding: 100px;
  margin: auto;
}

a {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
}

<a href="#">Button</a>

and how to make circle around mouse (following mouse) when i hover button?

Answer 1

Updated

It shows full circle even on the boundaries of the button

const btn = document.querySelector(".button")
const circle = document.querySelector(".circle")

btn.onmouseenter = function() {
  circle.classList.add("in")
}


btn.onmousemove = function(e) {
  const {
    top,
    left,
    width,
    height
  } = btn.getBoundingClientRect()
  const {
    clientY,
    clientX
  } = e
  if (clientX < left || clientY < top || clientX > left + width || clientY > top + height) {
    circle.classList.remove("in")
  }
  circle.style.top = `${clientY - top}px`
  circle.style.left = `${clientX - left}px`
};

body {
  margin: 20px;
  padding: 20px;
}

.button {
  padding: 40px 80px;
  border: 1px solid grey;
  color: blue;
  display: inline-block;
  position: relative;
}

.circle {
  position: absolute;
  display: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border: 2px solid red;
}

.circle.in {
  display: block;
}

<a class="button">
  Button
  <span class="circle"></span>
</a>

---

old answer The answer is extension of the answer by @Temani Afif.

The listener for mousemove is added on the button itself instead of the body, which would result in performance improvement since the cb is only called when you are hovering over the button.

var h = document.querySelector(".cursor");

h.onmousemove = function(e) {
  /* 15 = background-size/2 */
  h.style.setProperty(
    "background-position",
    e.clientX - 15 + "px " + (e.clientY - 15) + "px"
  );
};

body {
  padding: 100px 0;
}

a.cursor {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
  background: radial-gradient( farthest-side, transparent calc(100% - 3px), red calc(100% - 2px) calc(100% - 1px), transparent 100%) fixed/* Fixed to the screen*/
  no-repeat;
  /* Don't repeat*/
  background-size: 0px 0px;
  /* by default, circle is of 0px */
}

a.cursor:hover {
  background-size: 30px 30px;
  /* Control the size of the circle */
}

<a class="cursor" href="#">Button</a>

Answer 2

Consider a radial-gradient as background that you make fixed then simply adjust the position based on the cursor

var h =document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  /* 15 = background-size/2 */
  h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}

body {
  padding: 100px 0;
}

a.cursor {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
  background:
    radial-gradient(farthest-side, 
     transparent calc(100% - 3px),
     red calc(100% - 2px) calc(100% - 1px),
     transparent 100%) 
     fixed /* Fixed to the screen*/ 
     no-repeat; /* Don't repeat*/

  background-size:30px 30px; /* Control the size of the circle */
  
}

<a class="cursor" href="#">Button</a>

If you want the circle above the text consider pseudo element and the same trick:

var h =document.querySelector('.cursor');

document.body.onmousemove = function(e) {
  h.style.setProperty('background-position',(e.clientX - 15)+'px '+(e.clientY - 15)+'px');
}

body {
  padding: 100px 0;
}

a.cursor {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
  background-size:0 0; 
  position:relative;
}
a.cursor::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(farthest-side, 
     blue  calc(100% - 1px),
     transparent 100%) 
     fixed /* Fixed to the screen*/ 
     no-repeat; /* Don't repeat*/
  background-size:30px 30px;
  background-position:inherit;
}

<a class="cursor" href="#">Button</a>

Answer 3

You can do that with mousemove event. Catch the event and set the location of cirlce while the mouse moves.

window.addEventListener('mousemove', function(e){ 
  document.getElementById("circle").style.display = "block";
  document.getElementById("circle").style.left = e.offsetX + "px";
  document.getElementById("circle").style.top = e.offsetY + "px"; 
});

body {
  padding: 100px;
  margin: auto;
}

a {
  color: red;
  border: 2px solid red;
  padding: 20px 50px;
}

#circle{
  width: 30px;
  height: 30px;
  border: 1px solid red;
  border-radius: 50%;
  position: fixed;
  display: none;
}

<a href="#">Button</a>

<span id="circle"></span>