<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);
  }
  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.