.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>