<div class="container">
  <button class="button">Visible Button</button>
  <button class="button" id="hide">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 {
  opacity: 0;
}

/**
 * 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;
}

body {
  padding-top: 40px;
}

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.getElementById("hide");
checkbox.addEventListener("change", (e) => {
  hiddenButton.classList.toggle("hidden");
});