<div class="filters">
  <button class="filter" data-filter="isSport">Спорт</button>
  <button class="filter" data-filter="isFood">Еда</button>
  <button class="filter" data-filter="isWears">Одежда</button>
  <button class="filter filter_reset">Сброс</button>
</div>
<div class="wrapper">
  <div class="link link_visible isSport">Футбол</div>
  <div class="link link_visible isSport">Баскетбол</div>
  <div class="link link_visible isSport">Теннис</div>
  <div class="link link_visible isFood">Яблоко</div>
  <div class="link link_visible isFood">Груша</div>
  <div class="link link_visible isFood">Слива</div>
  <div class="link link_visible isWears">Футболка</div>
  <div class="link link_visible isWears">Майка</div>
  <div class="link link_visible isWears">Джинсы</div>
</div>

body {
  padding: 2rem;
  background: #e1332d;
  color: #fff;
}

.filters {
  display: flex;
  justify-content: center;
}
.filter {
  outline: none !important;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 45px;
  margin: 0 10px 2em;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 100%;
  background: #e3403a;
  border: 1px solid #da251f;
  box-shadow: 0px 2px 0 #d6251f, 2px 4px 6px #e02a24;
  font-weight: 900;
  letter-spacing: 1px;
  transition: all 150ms linear;
  &_reset {
    margin-left: auto;
  }
  &:hover {
    background: darken(#e3403a, 2%);
  }
  &:active,
  &_active {
    background: #e02c26;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
    color: #ec817d;
    text-decoration: none;
    text-shadow: -1px -1px 0 #c2211c;
  }
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.link {
  margin: 10px;
  border: 1px solid currentColor;
  padding: 1em 3em;
  color: rgba(#fff, 0.7);
  display: none;
  &_visible {
    display: block;
  }
}

let filters = document.querySelector('.filters');
let filterButtons = filters.querySelectorAll('.filter');
let filterReset = filters.querySelector('.filter_reset');
let wrapper = document.querySelector('.wrapper');
let links = wrapper.querySelectorAll('.link');

filters.addEventListener('click', e => {
  if (e.target.dataset.filter) {

    if (e.target.classList.contains('filter_active')) {
      
      e.target.classList.remove('filter_active');
      links.forEach(item => item.classList.add('link_visible'));
    
    } else {
    
      filterButtons.forEach(btn => btn.classList.remove('filter_active'));
      e.target.classList.add('filter_active');

      links.forEach(item => {
        item.classList.toggle(
          'link_visible',
          item.classList.contains(e.target.dataset.filter)
        );
      });

    }
  }
  
  if (e.target.classList.contains('filter_reset')) {
      filterButtons.forEach(btn => btn.classList.remove('filter_active'));
      links.forEach(item => item.classList.add('link_visible'));
  }
});