Cacher is the code snippet organizer for pro developers

.wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #eeeeee;
  transition: 200ms;
}

.button {
  cursor: pointer;
  display: block;
  text-align: center;
  font-size: 1.25rem;
  color: white;
  background-color: #262422;
  border-radius: 4px;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

.bg-red {
  background-color: #AA2F18;
}

(function() {

  var button = document.querySelector('.button');
  var box = document.querySelector('.box');

  button.addEventListener('click', function() {
    
    box.classList.toggle('bg-red');

  });
  
})();

<div class="wrapper">
  <button class="button">Toggle</button>
  <div class="box"></div>
</div>