バウンドアイコンボタン

<button class="d08-09-02-btn" type="button" aria-label="カートに追加">
          <svg viewBox="0 0 24 24" width="28" height="28" aria-hidden="true"><path class="d08-09-02-icon" fill="currentColor" d="M7 4H5L4 6H2v2h2l3.6 7.59-1.35 2.44C5.52 18.37 6.48 20 8 20h11v-2H8l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.24-6.15A1 1 0 0 0 20.6 7H6.21l-.94-2H2V4h5zM9 22a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
          <span class="d08-09-02-label">カートに追加</span>
        </button>

.d08-09-02-btn{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #e2e2e8;border-radius:12px;padding:12px 22px;font-size:14px;font-weight:600;color:#2a2d3a;cursor:pointer;transition:border-color .2s}
        .d08-09-02-btn:hover{border-color:#6a5cff}
        .d08-09-02-btn svg{color:#6a5cff;transform-origin:center;display:block}
        .d08-09-02-btn.is-bounce svg{animation:d08-09-02-bounce .55s cubic-bezier(.3,1.8,.4,1)}
        @keyframes d08-09-02-bounce{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-8deg)}55%{transform:scale(.85) rotate(4deg)}75%{transform:scale(1.15)}100%{transform:scale(1)}}
        .d08-09-02-btn.is-bounce .d08-09-02-label{animation:d08-09-02-shift .5s ease}
        @keyframes d08-09-02-shift{0%,100%{color:#2a2d3a}40%{color:#6a5cff}}

(function(){
        var btn=document.querySelector('#item-08-09-02 .d08-09-02-btn');if(!btn)return;
        btn.addEventListener('click',function(){
          btn.classList.remove('is-bounce');void btn.offsetWidth;btn.classList.add('is-bounce');
        });
      })();