Stepper Quantity Input

<!--
  Author: @emma-lake
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="qty-input">
  <button type="button" class="qty-input__btn qty-input__btn--minus">&minus;</button>
  <input type="text" class="qty-input__field" value="2" readonly />
  <button type="button" class="qty-input__btn qty-input__btn--plus">+</button>
</div>

/*
 * Author: @emma-lake
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.qty-input {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #2a2a33;
  background: #17171d;
  animation: qty-input-glow 3.4s ease-in-out infinite;
}
@keyframes qty-input-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  50% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10); }
}
.qty-input__btn {
  width: 38px;
  height: 40px;
  border: none;
  background: #1e1e26;
  color: #f4f4f5;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: qty-btn-breathe 3.4s ease-in-out infinite;
}
.qty-input__btn--plus { animation-delay: 1.7s; }
@keyframes qty-btn-breathe {
  0%, 85%, 100% { transform: scale(1); }
  92% { transform: scale(1.12); }
}
.qty-input__btn:hover {
  background: #292937;
}
.qty-input__btn:active {
  transform: scale(0.85);
}
.qty-input__field {
  width: 44px;
  height: 40px;
  text-align: center;
  border: none;
  background: transparent;
  color: #f4f4f5;
  font-family: system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  outline: none;
}