On/Off

 <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet">
  <form>
    <input id="cb" type="checkbox" checked="checked"/>
    <label for="cb">
    <div>ON</div>
    <div>OFF</div>
    </label>
    </form><a class="forkedfrom fa-solid fa-code-fork" href="#" target="_blank"></a> 

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  font-family: "Montserrat", sans-serif;
}
body input {
  font-family: inherit;
}
body form {
  position: relative;
  font-size: 8rem;
}
body form label {
  display: grid;
  letter-spacing: 0.1em;
  cursor: pointer;
  user-select: none;
}
body form label div:first-letter {
  color: #0000;
}
body form input {
  appearance: none;
  position: absolute;
  top: 0.07em;
  left: -0.1em;
  bottom: 0.05em;
  min-height: 100px;
  width: 1.57ch;
  border: 0.0625em solid #ccc;
  border-radius: 1000px;
  cursor: pointer;
}
body form input:before {
  position: absolute;
  top: 1.02em;
  left: 0.04em;
  content: "O";
  transition: 0.25s cubic-bezier(0.25, 0, 0.2, 1.1);
}
body form input:checked:before {
  top: -0.13em;
}
body .forkedfrom {
  display: grid;
  place-items: center;
  position: fixed;
  bottom: 0.5em;
  left: 0.5em;
  color: inherit;
  text-decoration: none;
  font-size: 1.5rem;
  width: 2em;
  height: 2em;
  border-radius: 100%;
  transition: 0.25s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
body .forkedfrom:hover {
  background: black;
  color: white;
}