Animated Quantity Stepper

<div class="qty">
  <button class="qty-btn" id="minus" aria-label="Decrease">−</button>
  <div class="qty-val"><span id="qv">1</span></div>
  <button class="qty-btn" id="plus" aria-label="Increase">+</button>
</div>

*{box-sizing:border-box}
.qty{display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e6ef;border-radius:14px;padding:6px;box-shadow:0 6px 20px rgba(20,25,50,.07);font-family:system-ui,sans-serif}
.qty-btn{width:44px;height:44px;border:0;border-radius:10px;background:#f1f3f9;color:#1a1f36;font-size:22px;font-weight:600;cursor:pointer;transition:.15s}
.qty-btn:hover{background:linear-gradient(135deg,#ff7a18,#ff477e);color:#fff}
.qty-btn:active{transform:scale(.92)}
.qty-val{width:60px;text-align:center;font-size:20px;font-weight:800;color:#1a1f36;overflow:hidden;height:28px;position:relative}
.qty-val span{display:block;animation:pop .25s ease}
@keyframes pop{from{transform:translateY(8px);opacity:0}}

var v=1,el=document.getElementById('qv');
function set(n){v=Math.max(0,n);var s=document.createElement('span');s.textContent=v;el.innerHTML='';el.appendChild(s)}
document.getElementById('plus').onclick=function(){set(v+1)};
document.getElementById('minus').onclick=function(){set(v-1)};