<button class="shiny">Let in shiiine 🎶</button>

<p>Hover to see the values!</p>
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shiny {
  border: none;
  padding: 10px 15px;
  background: #efefef;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

p {
  font-family: sans-serif;
}

const button = document.querySelector(".shiny");

const readout = document.querySelector("p");

button.addEventListener("mousemove", (e) => {
  console.log(e);
  readout.innerText = `x: ${e.clientX} y: ${e.clientY}`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.