Windows 10 Style Switches In Pure CSS / CSS3

Preview:

Description:

A pure CSS solution that converts the regular checkbox inputs into Window 10 style toggle switches.

How to use it:

Wrap the checkbox into a label element like this:

<label class="toggle">
  <input type="checkbox" onclick="toggle(this,event)"/>
  <div data-off="Off" data-on="On">Notification</div>
</label>

The core CSS styles:

.toggle {
  display: table;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 1rem;
}
.toggle input:focus + div { text-decoration: underline; }
.toggle > div {
  cursor: pointer;
  border-radius: 2rem;
  width: 5rem;
  height: 2rem;
  background: white;
  border: 2px solid black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  -webkit-transition: 200ms ease-out;
  transition: 200ms ease-out;
  font-size: 0;
}
.toggle > div:hover { box-shadow: 0 0 6px #005ca4; }
.toggle > div:before {
  will-change: translate;
  display: block;
  position: absolute;
 top: calc(50% - .5rem);
 left: .5rem;
  content: '';
  width: 1rem;
  height: 1rem;
  background: black;
  border-radius: 50%;
  -webkit-transition: 200ms;
  transition: 200ms;
}
.toggle > div:after {
  font-size: 1rem;
  position: absolute;
  right: -50%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  content: attr(data-off);
  pointer-events: none;
}
.toggle input:checked + div {
  background: #0078d7;
  border-color: #0078d7;
}
.toggle input:checked + div:before {
  color: #0078d7;
  -webkit-transform: translateX(280%);
  transform: translateX(280%);
 -webkit-transform: translateX(calc(2.5*100% + 4px));
 transform: translateX(calc(2.5*100% + 4px));
  background: white;
}
.toggle input:checked + div:after { content: attr(data-on); }
input:focus + div:after { text-decoration: underline; }

Additionally, you can handle the toggle events using JavaScript:

window.log = console.log.bind(console);
function $(expr, context) {
  return (context || document).querySelector(expr);
}
function $$(expr, context) {
  return [].slice.call((context || document).querySelectorAll(expr), 0);
}
function prepend(element, into) {
  if (element && into)
    into.insertBefore(element, into.firstChild);
}
let info = $('.toggles-info'),
  inputs = $$('.toggle input');
function showInfo(styledElement) {
  let div = document.createElement('div'),
    str = '';
  inputs.forEach(input => {
    str += input.checked ? '<span on> on </span> ' : '<span off> off </span>';
  });
  if (styledElement) {
    str += `<span click>click: ${styledElement.innerHTML}</span>`;
  }
  div.innerHTML = str;
  prepend(div, info);
}
function toggle(element, event) {
  showInfo(element.nextElementSibling);
}
showInfo();

Create a DIV element to place the toggle information.

<div class="toggles-info"></div>