Ativar Botão

html

<div class="btn red active"></div>
<div class="btn yellow"></div>
<div class="btn green"></div>
<div class="btn cyan"></div>
<div class="btn blue"></div>
<div class="btn magenta"></div>

css

.btn {
  box-shadow: 4px 4px 5px #aaa;
  width: 30px;
  height: 30px;
  margin: 4px;
}

.active {
  box-shadow: 1px 1px 5px #aaa;
  transform: translateY(3px);
  transition: 0.1s;
  display: table;
}

.active:after {
  font-size: 20px;
  content: "\274c";
  color: white;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

javascript

let buttons = document.querySelectorAll('.btn');
let desactivateAll = function () {
  buttons.forEach(function (b_) {
    b_.classList.remove('active');
  });
};
let btnClick = function () {
  desactivateAll();
  this.classList.add('active');
};
buttons.forEach(function (b) {
  b.addEventListener('click', btnClick);
});