シェイクエラーフィードバック

<div class="d08-09-05-wrap">
          <button class="d08-09-05-btn" type="button">送信する</button>
          <p class="d08-09-05-msg">入力内容をご確認ください</p>
        </div>

.d08-09-05-wrap{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-09-05-btn{background:#fff;border:1.5px solid #e2e2e8;border-radius:10px;padding:13px 30px;font-size:14px;font-weight:700;color:#2a2d3a;cursor:pointer;transition:border-color .2s,background .2s}
        .d08-09-05-btn.is-error{animation:d08-09-05-shake .5s cubic-bezier(.3,0,.3,1);border-color:#ff3b52;background:#fff5f6}
        @keyframes d08-09-05-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
        .d08-09-05-msg{font-size:12px;font-weight:600;color:#ff3b52;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;margin:0}
        .d08-09-05-msg.is-show{opacity:1;transform:translateY(0)}

(function(){
        var btn=document.querySelector('#item-08-09-05 .d08-09-05-btn');
        var msg=document.querySelector('#item-08-09-05 .d08-09-05-msg');
        if(!btn||!msg)return;
        var timer=null;
        btn.addEventListener('click',function(){
          btn.classList.remove('is-error');void btn.offsetWidth;btn.classList.add('is-error');
          msg.classList.add('is-show');
          if(timer)clearTimeout(timer);
          timer=setTimeout(function(){msg.classList.remove('is-show');},2200);
        });
      })();