Изменение цвета при нажатии на кнопку

Question

При нажатии на любую из кнопок должен меняться background-color на #fff, как на скрине.
JS не использую, пока что пишу на чистом html/css.

.portfolio-btn {
  padding: 10px 33px;
  cursor: pointer;
  font-size: 18px;
  line-height: 27px;
  text-transform: uppercase;
  border-radius: 5px;
  color: #393939;
  background: rgba(0, 0, 0, 0.08);
  transition: all .1s ease-in;
}

.portfolio-btn:focus {
  background-color: #fff;
}

<div class="portfolio-btns-row-wrapper">
  <div class="portfolio-btn">All</div>
  <div class="portfolio-btn">Web</div>
  <div class="portfolio-btn">Apps</div>
  <div class="portfolio-btn">Icons</div>
</div>

Answer 1

Для того, чтобы применялся focus для div необходимо добавить tabindex

.portfolio-btn {
  padding: 10px 33px;
  cursor: pointer;
  font-size: 18px;
  line-height: 27px;
  text-transform: uppercase;
  border-radius: 5px;
  color: #393939;
  background: rgba(0, 0, 0, 0.08);
  transition: all .1s ease-in;
}

.portfolio-btn:focus {
  background-color: #fff;
}

<div class="portfolio-btns-row-wrapper">
  <div class="portfolio-btn" tabindex="0">All</div>
  <div class="portfolio-btn" tabindex="0">Web</div>
  <div class="portfolio-btn" tabindex="0">Apps</div>
  <div class="portfolio-btn" tabindex="0">Icons</div>
</div>

или использовать button

.portfolio-btn {
  padding: 10px 33px;
  cursor: pointer;
  font-size: 18px;
  line-height: 27px;
  text-transform: uppercase;
  border-radius: 5px;
  color: #393939;
  background: rgba(0, 0, 0, 0.08);
  transition: all .1s ease-in;
}

.portfolio-btn:focus {
  background-color: #fff;
}

<div class="portfolio-btns-row-wrapper">
  <button class="portfolio-btn">All</button>
  <button class="portfolio-btn">Web</button>
  <button class="portfolio-btn">Apps</button>
  <button class="portfolio-btn">Icons</button>
</div>

Answer 2

Ну и вариант на JS на всякий пожарный.

document.querySelectorAll('.portfolio-btn').forEach(function(btn) {
  btn.addEventListener('click', function(event) {
    let target = event.target.closest('.portfolio-btn')
    if(target) {
      let oldActive = target.closest('.portfolio-btns-row-wrapper').querySelector('.portfolio-btn--active');
      if(oldActive) oldActive.classList.remove('portfolio-btn--active');
      target.classList.add('portfolio-btn--active')
    }
  });
});

.portfolio-btn {
  padding: 10px 33px;
  cursor: pointer;
  font-size: 18px;
  line-height: 27px;
  text-transform: uppercase;
  border-radius: 5px;
  color: #393939;
  background: rgba(0, 0, 0, 0.08);
  transition: all .1s ease-in;
}

.portfolio-btn--active {
  background-color: #fff;
}

<div class="portfolio-btns-row-wrapper">
  <div class="portfolio-btn">All</div>
  <div class="portfolio-btn">Web</div>
  <div class="portfolio-btn">Apps</div>
  <div class="portfolio-btn">Icons</div>
</div>

БЛОГ НА HUSL

Изменение цвета при нажатии на кнопку

Ответы (2 шт):