マグネットスイッチ風トグルボタン

<button class="d08-14-11-sw" type="button" role="switch" aria-checked="false" aria-label="マグネットスイッチ">
          <span class="d08-14-11-track"><span class="d08-14-11-knob"></span></span>
        </button>

.d08-14-11-sw{background:none;border:none;cursor:pointer;padding:0}
        .d08-14-11-track{display:block;width:76px;height:36px;border-radius:18px;background:linear-gradient(135deg,#334155,#1e293b);position:relative;box-shadow:inset 0 2px 6px rgba(0,0,0,.3);transition:background .3s}
        .d08-14-11-knob{position:absolute;top:3px;left:3px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#f87171,#3b82f6);box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .3s cubic-bezier(.6,0,.2,1)}
        .d08-14-11-sw.is-on .d08-14-11-track{background:linear-gradient(135deg,#7c3aed,#4c1d95)}

(function(){
        var sw=document.querySelector('#item-08-14-11 .d08-14-11-sw');
        var track=document.querySelector('#item-08-14-11 .d08-14-11-track');
        var knob=document.querySelector('#item-08-14-11 .d08-14-11-knob');if(!sw||!track||!knob)return;
        var on=false;
        function base(){return on?40:0;}
        sw.addEventListener('click',function(){
          on=!on;sw.classList.toggle('is-on',on);sw.setAttribute('aria-checked',on?'true':'false');
          knob.style.transform='translateX('+base()+'px)';
        });
        track.addEventListener('mousemove',function(e){
          var r=track.getBoundingClientRect();
          var mx=e.clientX-r.left;
          var center=base()+15;
          var nudge=Math.max(-8,Math.min(8,(mx-center)*0.15));
          knob.style.transform='translateX('+(base()+nudge)+'px)';
        });
        track.addEventListener('mouseleave',function(){knob.style.transform='translateX('+base()+'px)';});
      })();