Categoría: HTML5 y CSS3

.toggle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 5rem;
  height: 2.5rem;
  font-family: sans-serif;
  font-size: 0.75rem;
  font-weight: 100;
}

.toggle {
  display: none;
}

.foux-toggle {
  position: relative;
  width: 5rem;
  height: 2.5rem;
  border-radius: 2.5rem;
  margin: 0;
  border-width: 1px;
  border-style: solid;
  border-color: #E4E4E4;
  background-color: #F7F7F7;
  -webkit-transition: background-color 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
  transition: background-color 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
}
.foux-toggle:before {
  content: "";
  position: absolute;
  top: 0.25rem;
  left: 0.3125rem;
  display: block;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 1.875rem;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
  transition: left 0.2s cubic-bezier(0.34, 0.93, 0.85, 0.91);
}
.toggle:checked ~ .foux-toggle {
  border-color: #7acbee;
  background-color: #8bd8fc;
}
.toggle:checked ~ .foux-toggle:before {
  left: 2.75rem;
}

.toggle--label:before, .toggle--label:after {
  position: absolute;
  top: 0;
  bottom: 0;
  -webkit-transition: opacity 0.4s linear;
  transition: opacity 0.4s linear;
}

.toggle--label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 2.5rem;
  cursor: pointer;
  z-index: 10;
  letter-spacing: 0.0625rem;
}
.toggle--label:before {
  content: 'On';
  right: 40%;
  left: 0;
  color: white;
  opacity: 0;
}
.toggle:checked + .toggle--label:before {
  opacity: 1;
}
.toggle--label:after {
  content: 'Off';
  position: absolute;
  right: 0;
  left: 40%;
  opacity: 1;
}
.toggle:checked + .toggle--label:after {
  opacity: 0;
  -webkit-transition-duration: 0.05s;
          transition-duration: 0.05s;
}

html {
  background-color: #FBFBFB;
}