<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;
}
View Compiled
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");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.