<div class="card">
<div class="buttons">
<button class="one">Change Background</button>
<button class="two">Change Background</button>
<button class="tree">Change Background</button>
<button class="four">Change Background</button>
</div>
</div>
* {
box-sizing: border-box;
}
body {
background: #bdbdbd;
min-height: 100vh;
display: flex;
align-items: center;
}
.card {
width: 100%;
max-width: 500px;
margin: 0 auto;
border-radius: 5px;
padding: 20px;
display: flex;
align-items: end;
background: #fcfffe;
box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
transition: background-color .3s linear;
}
.buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 5px;
}
button {
border: none;
padding: 5px;
border-radius: 5px;
color: #f3f3f3;
cursor: pointer;
box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}
.one {
background: #56d66b;
}
.two {
background: #56d6d6;
}
.tree {
background: #d4446f;
}
.four {
background: #3693d6;
}
View Compiled
const btns = document.querySelector('.buttons');
const card = document.querySelector('.card');
btns.addEventListener('click', ({target}) => {
if (target.tagName === 'BUTTON') {
const [colorClass] = target.classList;
card.classList.forEach(className => {
if(className != 'card') {
card.classList.remove(className)
}
})
card.classList.add(colorClass);
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.