<h2>Check Boxes</h2>
<input type="checkbox"checked/>
<input type="checkbox"/><br/>
<input type="checkbox"checked disabled/>
<input type="checkbox" disabled/>

@import url('https://fonts.googleapis.com/css?family=Quicksand');

*{
  font-family: 'Quicksand', sans-serif;
}

html{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, #ffffff 0%,#f2f8fc 100%);
  color:#888;
}
body{
  text-align:center;
}

/* INPUT */
input[type="checkbox"]{
  appearance:none;
  width:40px;
  height:16px;
  border:1px solid #aaa;
  border-radius:2px;
  background:#ebebeb;
  position:relative;
  display:inline-block;
  overflow:hidden;
  vertical-align:middle;
  transition: background 0.3s;
  box-sizing:border-box;
}
input[type="checkbox"]:after{
  content:'';
  position:absolute;
  top:-1px;
  left:-1px;
  width:14px;
  height:14px;
  background:white;
  border:1px solid #aaa;
  border-radius:2px;
  transition: left 0.1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
input[type="checkbox"]:checked{
  background:#a6c7ff;
  border-color:#8daee5;
}
input[type="checkbox"]:checked:after{
  left:23px;
  border-color:#8daee5;
}

input[type="checkbox"]:hover:not(:checked):not(:disabled):after,
input[type="checkbox"]:focus:not(:checked):not(:disabled):after{
  left:0px;
}

input[type="checkbox"]:hover:checked:not(:disabled):after,
input[type="checkbox"]:focus:checked:not(:disabled):after{
  left:22px;
}

input[type="checkbox"]:disabled{
  opacity:0.5;
}