<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;
}
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.getElementById("hide");
checkbox.addEventListener("change", (e) => {
hiddenButton.classList.toggle("hidden");
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.