<div class="container">
  <button class="button">Visible Button</button>
  <button class="button hidden">Hidden Button</button>
  <button class="button">Visible Button</button>
</div>

<nav class="demo-header">
  <label>
    <input type="checkbox" id="toggle">
    Toggle hidden element
  </label>
</nav>

.hidden {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

// Dummy element to ilustrate the jump

.remove-position {
  position: static !important;
}

body::before {
  display: block;
  content: "Scroll to see the buttons. \00000a Use tab to focus on buttons and see a page jump.";
  margin: 3rem;
  padding: 3rem;
  height: 3000px;
  border: 2px dashed red;
  background-color: rgba(255, 0, 0, 0.2);
  text-align: center;
  white-space: pre;
}

/**
 * Template CSS
 * This is used only for demo.
**/

.container {
  text-align: center;
  padding: 40px;
}

.button {
  font-size: 100%;
  padding: 0.5em 1em;
  color: rgba(0, 0, 0, 0.8);
  border: transparent;
  background-color: #e6e6e6;
  text-decoration: none;
  border-radius: 2px;
  margin: 0 1em;
  cursor: pointer;
}

.button:hover {
  background-color: dodgerblue;
}

.button:focus {
  background-color: firebrick;
}

.demo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 48px;
  background-color: rgba(#fff, 0.7);
  border-bottom: 1px solid #e9ebf2;
  text-align: center;
}

const button = document.querySelectorAll("button");
button.forEach((button) =>
  button.addEventListener("click", () => alert("You clicked a button"))
);

// Demo only

const checkbox = document.getElementById("toggle");
const hiddenButton = document.querySelector(".hidden");
checkbox.addEventListener("change", (e) => {
  hiddenButton.classList.toggle("remove-position");
});