<button class="button">Button 1</button>
<button class="button">Button 2</button>
<button class="button">Button 3</button>
<button class="button">Button 4</button>
html {
height: 100%;
}
body {
height: 100%;
display: grid;
place-content: center;
}
.button {
position: relative;
margin: 0.5em;
padding: 0.5em 1em;
border: 0;
border-radius: 0.5em;
background-color: pink;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.button:nth-child(even) {
background-color: lightblue;
}
.button:active,
.active {
top: 2px;
left: 1px;
box-shadow: none;
}
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', () => {
buttons.forEach(button => button.classList.remove('active'));
button.classList.add('active');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.