CSS Toggle switch

gistfile1.css

body {
  background-color: #CED6DC;
}

.switch {
  position: relative;
  padding-bottom: 10px;
}

/* switch component */
.switch-input {
  position: absolute;
  margin-left: -999px;
  visibility: hidden;
}

.switch-label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}


/* Switch styling */
.switch-label {
  display: inline-block;
  padding: 2px;
  /* width: 20px; */
  height: 12px;
  border-radius: 2px;
}

.switch-label:before,
.switch-label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

.switch-label:before {
  right: 1px;
  background-color: #BDC7CE;
  border-radius: 2px;
  transition: background 0.2s ease-in-out;
  box-shadow: inset 0px 2px 8px -3px rgba(0,0,0,0.85);
  width: 20px;
}

.switch-label:after {
  width: 7px;
  background-color: #fff;
  border-radius: 2px;
  transition: margin 0.2s ease-in-out;
  border: 1px solid #ACB8C1;
  
}

/* Checked state */
.switch-input:checked + .switch-label:before {
  background-color: #61A7E3;
}

.switch-input:checked + .switch-label:after {
  margin-left: 13px;
}

.switch-label-text {
  margin-left: 32px; /* set to width of switch + any extra padding */
}

switch.html

<div class="switch">
  <input id="switch-confirm" type="checkbox" class="switch-input" />
  <label for="switch-confirm" class="switch-label"><span class="switch-label-text">Switch one</span></label>
</div>

<div class="switch">
  <input id="switch-confirm" type="checkbox" class="switch-input" checked/>
  <label for="switch-confirm" class="switch-label"><span class="switch-label-text">Switch two</span></label>
</div>