Счётчик количества товара: кнопка +/– с анимацией и валидацией (HTML + CSS + JS)

На любом интернет-магазине кнопка «+/–» в карточке товара — это не просто элемент, а конвертер. По данным Яндекс.Метрики, 68% пользователей бросают корзину, если нельзя быстро изменить количество. В 2025 году счётчик должен быть: адаптивным, доступным, с анимацией, валидацией (минимум 1) и работать без перезагрузки. Покажем, как сделать современный счётчик на чистом HTML, CSS и JS — копируйте, вставляйте, меняйте цвета. Полный код, демо, вариации и чек-лист.

Пользователь нажимает «+» — количество растёт. Нажимает «–» — падает до 1. При 1 кнопка «–» становится серой (класс .min). Всё плавно, без JS-фреймворков. Адаптивно: на мобильных кнопки крупнее, на десктопе — компактно.

<div class="quantity">
  <button class="quantity__btn quantity__btn--minus min" type="button" aria-label="Уменьшить">-</button>
  <input class="quantity__input" type="text" value="1" readonly>
  <button class="quantity__btn quantity__btn--plus" type="button" aria-label="Увеличить">+</button>
</div>

.quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Helvetica, sans-serif;
}

.quantity__btn {
  width: 36px;
  height: 36px;
  background: #35e201;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity__btn:hover {
  background: #2cc700;
  transform: scale(1.05);
}

.quantity__btn.min {
  background: #989797;
  cursor: not-allowed;
}

.quantity__btn.min:hover {
  background: #989797;
  transform: none;
}

.quantity__input {
  width: 60px;
  height: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

/* Адаптивность */
@media (max-width: 480px) {
  .quantity__btn,
  .quantity__input {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .quantity__input {
    width: 70px;
  }
}

document.querySelectorAll('.quantity').forEach(counter => {
  const input = counter.querySelector('.quantity__input');
  const minus = counter.querySelector('.quantity__btn--minus');
  const plus = counter.querySelector('.quantity__btn--plus');

  plus.addEventListener('click', () => {
    let value = parseInt(input.value);
    input.value = ++value;
    if (value > 1) minus.classList.remove('min');
  });

  minus.addEventListener('click', () => {
    let value = parseInt(input.value);
    if (value > 1) {
      input.value = --value;
      if (value === 1) minus.classList.add('min');
    }
  });
});

• Работает на мобильных и десктопе
• Кнопка «–» неактивна при 1
• Анимация при наведении
• ARIA-метки для скринридеров
• Не ломает верстку при любом количестве
• JS не конфликтует с другими счётчиками

Хотите счётчик под ваш бренд? Закажите разработку интернет-магазина — счётчики, корзина, оплата за 14 дней.