Add cursor none for the whole page onclick even for buttons with cursor Styling (No jQuery)

I added a button with a cursor and what I wanted was that when you click on the button that EVERYTHING gets a cursor: none;. If you click on the button then the cursor for the body goes away but if you hover on a button or an element with a cursor then the cursor is back. How could I fix this problem? And how can i improve my code?

Here is my code:

function removeCursor() {
  document.getElementById("body").style.cursor = "none";
}
body {
  height: 100vh;
}

button {
  cursor: pointer;
}
<body id="body">
  <button onclick="removeCursor();" id="button">Hello</button>
</body>

Answer

You could it this way :

function removeCursor() {
  document.querySelectorAll('*').forEach(element => element.style.cursor = 'none');
}
button {
  cursor: pointer;
}
<button onclick="removeCursor();" id="button">Hello</button>