<div class="wrapper">
  <h1>CSS only simple checkbox's</h1>
  
  <ul class="form-fields">
    
    <li class="field check-round slide">
      <input type="checkbox" name="check-slide" id="check-slide" />
      <label for="check-slide">Round button  <span></span></label>
    </li>
    
    <li class="field check-round slide-inverse">
      <input type="checkbox" id="check-slide-i" />
      <label for="check-slide-i">Round button inverse <span></span></label>
    </li>
    
    <li class="field check-square slide-top">
      <input type="checkbox" name="check-slidea" id="check-slidea" />
      <label for="check-slidea">Slide Top <span></span></label>
    </li>
    
    <li class="field check-square flip-top">
      <input type="checkbox" name="check-slideb" id="check-slideb" />
      <label for="check-slideb">Flip top <span></span></label>
    </li>

    
  </ul>  
  
  
</div>

body {
  font-family: 'Josefin Sans', sans-serif;
  background :#1E1E20;
  font-size: 16px;
}

h1 {
  margin-bottom: 2em;
  font-size: 2em;
  color: #fff;
}

.wrapper {
  width: 350px;
  margin: 45px auto;
}

.form-fields {
  background :#ecf0f1;
  border: 1px solid #bdc3c7;
}

.field {
  padding: 15px;
  border-top: 1px solid #bdc3c7;
  
  &:first-child {
    border-top: none;
  }
}

input[type="checkbox"]{
  display: none;
}

.field {
  display: relative;
  
  input {}
  
  label {
    position: relative;
    line-height: 32px;
    display: block;
    
    &:before, 
    &:after,
    span:before,
    span:after {
      content: '';
      display: block;
      position: absolute;
    }
    
    span {
      position: relative;
      cursor: pointer;
      display: block;
      float: right;
    }
  }
}

/* global variables */
@color-active : #2ecc71;
@color-disable : #e74c3c;
@color-bg : #ECF0F1;
@border-thin : 1px solid #bdc3c7;

.check-xxx {
  label {
    
    span {}
    span:before {}
    span:after {}
  }
  
  input:checked + label {
    
  }
}

/* round checkbox
 ************************/

.check-round {
  label {
    
    
    span {
      border-radius: 16px;
      height: 32px;
      width: 64px;
      
    }
    span:before {
      border-radius: 50%; 
      height: 28px;
      width: 28px;
      left: 2px;
      top: 2px;
    }
    
  }
  
  input:checked + label {   
    span:before {
      left: 34px;
    }
  } 
}

.check-round.slide {
  label {
        
    span {
      background: @color-disable;    
      transition: background .4s ease-in;
      
    }
    span:before {
      background: @color-bg;
      transition: left .4s ease-in;
    }

  }
  
  input:checked + label {
    span {
      background: @color-active;
    }
    
  } 
}
.check-round.slide-inverse {
  label {
        
    span {
      background: @color-bg;
      border: @border-thin;
      
    }
    span:before {
      background: @color-disable;
      transition: left .4s ease-in,
                  background .4s ease-in;
    }

  }
  
  input:checked + label {
    span:before {
      background: @color-active;
    }
    
  } 
}


/* Square slider 
 *******************************************/
.check-square {
  label {     
    span {
      height: 32px;
      width: 64px;
      
    }
    span:before {
      height: 100%;
      width: 50%;
      top: -1px;
      border: @border-thin
     }
     span:after {
      height: 100%;
      width: 50%; 
      left: 0px;
      
    } 
  }
}

/* Slide Top */
.check-square.slide-top {
  label {
        
    span {
      background: @color-disable;
      transition: background .4s ease-in;   
    }
    span:before {
      background: @color-bg;
      transition: left .4s ease-in;
    }
    
    span:after {
      transition: left .4s ease-in;
    }

  }
  
  input:checked + label {   
    span:before,
    span:after {
      left: 34px;
    }
    
    span {
      background: @color-active;
    }
    
  } 
}



/* flip-top */
.check-square.flip-top {
  
  label {
     perspective: 250px;    
    span {
       
      background: @color-disable;
 
    }
    span:before {
      left: -2px;
      transform-origin: center right;
      transform: rotateX(0deg) rotateZ(00deg) rotateY(00deg);
      background: @color-bg;
      transition: all .6s ease-in;
      z-index: 101;
    }
    
    span:after {
      background: @color-active;
      z-index: 100;
    }

  }
  
  input:checked + label {   
    span:before,
    span:after {
      transform: rotateX(0deg) rotateY(180deg) rotateY(00deg);
    }
     
  } 
}