CSS Toggle Switch | Learning Axis

HTML

CSS

body {
  font-size: 8vmin;
  background: linear-gradient(to bottom left, #262f2c 25%, #524166 75%);
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lock {
  --c1: #bd72c2;
  --c2: #3b21a5;
  appearance: none;
  font-size: 1em;
  width: 2em;
  height: 1em;
  border: 1px solid #0000;
  border-radius: 2em;
  background: linear-gradient(to bottom left, var(--c1) 25%, var(--c2) 95%);
  background-clip: content-box;
  box-shadow:
    inset 0 1px 3px -1px #fff,
    inset 0 -1px 3px -1px #0008,
    0 0.5em 0.5em -0.35em #0008;
  position: relative;
  overflow: hidden;
  &::before {
    --lock: #5d3ae6;
    content: "";
    width: 0.66em;
    height: 0.66em;
    position: absolute;
    top: 50%;
    left: 25%;
    translate: -50% -50%;
    background:
      radial-gradient(circle at 75% 25%, #a897ee00, #6857aecc),
      linear-gradient(var(--lock) 0 0) 50% 0.3em / 0.3em 0.2em,
      linear-gradient(var(--lock) 0 0) 0.22em 0.23em / 0.05em 0.2em,
      linear-gradient(var(--lock) 0 0) calc(100% - 0.22em) 0.23em / 0.05em 0.2em,
      radial-gradient(farthest-side at 50% 100%, #0000 calc(100% - 0.05em), var(--lock) 0 99.99%, #0000 0) 50% 0.12em / calc(100% - 0.44em) 0.125em,#f8f6fa;
    background-repeat: no-repeat;
    background-clip: content-box;
    border: 1px solid #0000;
    border-radius: 50%;
    transition: left 0.35s, background-position 0.35s, scale 0.25s;
    box-shadow:
      inset -0.5px 1px 3px 0px #fff,
      inset 1px -1px 3px -1px #0004,
      0 0 0.125em #2025,
      -0.075em 0.25em 0.15em 0.125em #2024,
      -0.25em 0.5em 0.25em #6064,
      -0.5em 0.5em 0.35em #2024
  }
  &:checked {
    &::before {
      left: 75%;
      background-position:
        0 0, 50% 0.3em, 0.22em 0.23em, calc(100% - 0.22em) 0.3em, 50% 0.12em;
    }
  }
  &:active {
    &::before {
      scale: 0.975;
    }
  }
  &[disabled] {
    filter: grayscale(1);
    &::before {
      scale: 1;
    }
  }
}