スイッチ切替の質感

<button class="d08-03-07-sw" type="button" role="switch" aria-checked="false" aria-label="テーマ切替">
          <span class="d08-03-07-track">
            <span class="d08-03-07-knob">
              <svg class="d08-03-07-sun" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="5" fill="#ffb020"/><g stroke="#ffb020" stroke-width="2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="4"/><line x1="12" y1="20" x2="12" y2="23"/><line x1="1" y1="12" x2="4" y2="12"/><line x1="20" y1="12" x2="23" y2="12"/><line x1="4" y1="4" x2="6" y2="6"/><line x1="18" y1="18" x2="20" y2="20"/><line x1="4" y1="20" x2="6" y2="18"/><line x1="18" y1="6" x2="20" y2="4"/></g></svg>
              <svg class="d08-03-07-moon" viewBox="0 0 24 24" width="16" height="16"><path fill="#cfd6ff" d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z"/></svg>
            </span>
          </span>
        </button>

.d08-03-07-sw{background:none;border:none;cursor:pointer;padding:0}
        .d08-03-07-track{display:block;width:80px;height:38px;border-radius:19px;background:linear-gradient(135deg,#8ecbff,#5ea8ff);position:relative;transition:background .4s;box-shadow:inset 0 2px 6px rgba(0,0,0,.15)}
        .d08-03-07-knob{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.6,0,.2,1)}
        .d08-03-07-sun,.d08-03-07-moon{position:absolute;transition:opacity .3s,transform .4s}
        .d08-03-07-moon{opacity:0;transform:rotate(-40deg)}
        .d08-03-07-sw.is-dark .d08-03-07-track{background:linear-gradient(135deg,#3a3f6b,#20233b)}
        .d08-03-07-sw.is-dark .d08-03-07-knob{transform:translateX(42px)}
        .d08-03-07-sw.is-dark .d08-03-07-sun{opacity:0;transform:rotate(40deg)}
        .d08-03-07-sw.is-dark .d08-03-07-moon{opacity:1;transform:rotate(0)}

(function(){
        var sw=document.querySelector('#item-08-03-07 .d08-03-07-sw');if(!sw)return;
        sw.addEventListener('click',function(){var on=sw.classList.toggle('is-dark');sw.setAttribute('aria-checked',on?'true':'false');});
      })();