Toggle

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Accessible Toggle Switch</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <label class="switch" for="toggle">
      <input type="checkbox" id="toggle" />
      <span class="slider"></span>
    </label>
  </body>
</html>

CSS

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ecf0f1;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  cursor: pointer;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #bdc3c7;
  border-radius: 34px;
  -webkit-transition: 0.2s cubic-bezier(0.55, 0, 0.1, 1);
  transition: 0.2s cubic-bezier(0.55, 0, 0.1, 1);
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: 0.2s cubic-bezier(0.55, 0, 0.1, 1);
  transition: 0.2s cubic-bezier(0.55, 0, 0.1, 1);
}

input:checked + .slider {
  background-color: #2ecc71;
}

input:focus + .slider {
  box-shadow: 0 0 5px #2ecc71;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}