コトッと止まるトグルスイッチ

<div class="d08-11-11-stage">
          <button class="d08-11-11-slider" type="button" role="switch" aria-checked="false" aria-label="通知音を切り替え">
            <span class="d08-11-11-track"><span class="d08-11-11-knob"></span></span>
          </button>
          <span class="d08-11-11-status">サイレントモード</span>
        </div>

.d08-11-11-stage{display:flex;flex-direction:column;align-items:center;gap:10px}
        .d08-11-11-slider{background:none;border:none;padding:0;cursor:pointer}
        .d08-11-11-track{display:block;width:56px;height:30px;border-radius:15px;background:#d8dae2;position:relative;transition:background .25s ease}
        .d08-11-11-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.4,0,.2,1)}
        .d08-11-11-slider.is-on .d08-11-11-track{background:#6a5cff}
        .d08-11-11-slider.is-on .d08-11-11-knob{transform:translateX(26px)}
        .d08-11-11-knob.is-snap{animation:d08-11-11-snap .32s cubic-bezier(.3,1.7,.4,1)}
        @keyframes d08-11-11-snap{0%{transform:scale(1,1)}40%{transform:scale(1.25,.8)}70%{transform:scale(.92,1.1)}100%{transform:scale(1,1)}}
        .d08-11-11-status{font-size:11px;font-weight:700;color:#9aa0ad}

(function(){
        var slider=document.querySelector('#item-08-11-11 .d08-11-11-slider');
        var knob=document.querySelector('#item-08-11-11 .d08-11-11-knob');
        var status=document.querySelector('#item-08-11-11 .d08-11-11-status');
        if(!slider||!knob||!status)return;
        slider.addEventListener('click',function(){
          var on=slider.classList.toggle('is-on');
          slider.setAttribute('aria-checked',String(on));
          status.textContent=on?'サイレントモード：オン':'サイレントモード：オフ';
          knob.classList.remove('is-snap');void knob.offsetWidth;knob.classList.add('is-snap');
        });
      })();