<input class="toggle-input" type="checkbox" id="toggle-1">
<label class="toggle-label" for="toggle-1"> Off / On</label>

/* hide visually*/
.toggle-input {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
.toggle-label {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 5rem;
  min-height: 2.5rem;
  white-space: no-wrap;
  color: transparent;
  clip-path: polygon(5px 0%, 100% 0, calc(100% - 5px) 100%, 0% 100%);
  cursor: pointer;
}
.toggle-label:before,
.toggle-label:after {
  content: "Off";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #888888;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  transition: 0.3s ease;
  pointer-events: none;
}
.toggle-label:after {
  content: "On";
  left: 100%;
  color: #fff;
  background: #2271b1;
}
.toggle-input:checked + label:before,
.toggle-input:checked + label:after {
  transform: translateX(-100%);
}
.toggle-input:focus + label:before,
.toggle-input:focus + label:after {
  text-shadow: 1px 1px #000;
}