스큐어모피즘

<div class="pad">
  <div class="switch" id="switch">
    <div class="knob"></div>
  </div>
  <span class="caption">POWER</span>
</div>

body{background:#3a3128}
.pad{width:min(70%,220px);aspect-ratio:1.5;border-radius:20px;display:grid;place-items:center;gap:10px;
  background:linear-gradient(160deg,#5a4a38,#2e241a);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.12),inset 0 -6px 14px rgba(0,0,0,.5),0 14px 26px rgba(0,0,0,.4);
  border:1px solid #1c150e}
.switch{width:56%;aspect-ratio:2.2;border-radius:999px;position:relative;cursor:pointer;
  background:linear-gradient(180deg,#171310,#3a322a);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7),inset 0 -1px 1px rgba(255,255,255,.15)}
.knob{position:absolute;top:8%;left:4%;width:44%;height:84%;border-radius:999px;
  background:linear-gradient(180deg,#e8dcc8,#a99872);
  box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.6);
  transition:left .5s cubic-bezier(.34,1.4,.64,1)}
.switch.on .knob{left:52%;background:linear-gradient(180deg,#fff3d6,#e2c98c)}
.switch.on{box-shadow:inset 0 3px 6px rgba(0,0,0,.7),0 0 14px rgba(255,200,90,.5)}
.caption{font:700 11px/1 Georgia,serif;letter-spacing:.24em;color:#cbb896}

const sw = document.getElementById('switch');
setInterval(() => sw.classList.toggle('on'), 1500);