Togglers

HTML

<div class="toggle">
  <input class="toggle-trigger" type="checkbox" checked>
  <i class="toggle-indicator"></i>
  <b class="toggle-background"></b>
</div>

<div class="toggle info">
  <input class="toggle-trigger" type="checkbox" checked>
  <i class="toggle-indicator"></i>
  <b class="toggle-background"></b>
</div>

<div class="toggle warn">
  <input class="toggle-trigger" type="checkbox" checked>
  <i class="toggle-indicator"></i>
  <b class="toggle-background"></b>
</div>

<div class="toggle alert">
  <input class="toggle-trigger" type="checkbox" checked>
  <i class="toggle-indicator"></i>
  <b class="toggle-background"></b>
</div>

<br><br>

<div class="toggle-wrapper">
  <!-- Trigger can be outside of toggle if it's wrapped with .toggle-wrapper -->
  <input class="toggle-trigger" type="checkbox">
  
  <div class="toggle warn">
    <i class="toggle-indicator"></i>
    <b class="toggle-background"></b>
  </div>
  
  <span class="text">Toggle me</span>
</div>

<br><br>

<div class="toggle-wrapper">
  <input class="toggle-trigger" type="checkbox" checked>
  
  <div class="toggle info">
    <i class="toggle-indicator"></i>
    <b class="toggle-background"></b>
  </div>
  
  <span class="text toggle-check-hide">Check me</span>
  <span class="text toggle-check-show">Uncheck me</span>
</div>

CSS

.toggle-wrapper {
  position: relative;
  display: inline-block;
}

.toggle {
  position: relative;
  display: inline-block;
  height: 10px;
  width: 20px;
  border-radius: 10px;
}

.toggle .toggle-trigger,
.toggle-wrapper .toggle-trigger,
.toggle .toggle-background{
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.toggle .toggle-indicator{
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
  z-index: 2;
}

.toggle .toggle-indicator,
.toggle .toggle-background {
  transition: 0.2s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

.toggle .toggle-trigger:checked ~ .toggle-indicator,
.toggle-wrapper .toggle-trigger:checked ~ .toggle .toggle-indicator{
  left: 50%;
}

.toggle .toggle-background{
  opacity: 1;
  background: silver;
  border-radius: 10px;
  z-index: 1;
}

.toggle-trigger:checked ~ .toggle-check-hide,
.toggle-trigger:checked ~ * .toggle-check-hide,
.toggle-trigger:not(:checked) ~ .toggle-check-show,
.toggle-trigger:not(:checked) ~ * .toggle-check-show{
  display: none;
}



.toggle .toggle-trigger:checked ~ .toggle-background,
.toggle-wrapper .toggle-trigger:checked ~ .toggle .toggle-background{
  background: #0DB942;
}

.toggle.info .toggle-trigger:checked ~ .toggle-background ,
.toggle-wrapper .toggle-trigger:checked ~ .toggle.info .toggle-background {
  background: #2C9EE4;
}

.toggle.alert .toggle-trigger:checked ~ .toggle-background ,
.toggle-wrapper .toggle-trigger:checked ~ .toggle.alert .toggle-background {
  background: #E62A67;
}

.toggle.warn .toggle-trigger:checked ~ .toggle-background,
.toggle-wrapper .toggle-trigger:checked ~ .toggle.warn .toggle-background{
  background: #FFA020;
}