<label for="wtoggle" class="wtoggle">
  <input class="wtoggle__input" type="checkbox" id="wtoggle">
  <div class="wtoggle__fill"></div>
</label>

.wtoggle {
  --width: 50px;
  --height: calc(var(--width) / 2);
  --border-radius: calc(var(--height) / 2);
  display: inline-block;
  cursor: pointer;
}

.wtoggle__input {
  display: none;
}

.wtoggle__fill {
  position: relative;
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  background: #DDDDDD;
  border: 1px solid #DDDDDD;
  transition: background 0.2s;
}
.wtoggle__input:checked ~ .wtoggle__fill {
  background: #2271B1;
  border: 1px solid #2271B1;
}
.wtoggle__fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--height);
  width: var(--height);
  background: #FFFFFF;
  border-radius: var(--border-radius);
  transition: transform 0.2s;
}
.wtoggle__input:checked ~ .wtoggle__fill::before {
  transform: translateX(100%);
}