SOURCE

<label>
  <input class="input" type="checkbox" checked="checked">
  <div class="box"></div>
</label>

    .box {
      position: relative;
      width: 52px;
      height: 32px;
      border: 1px solid #DFDFDF;
      outline: 0;
      border-radius: 16px;
      box-sizing: border-box;
      background-color: #DFDFDF;
      -webkit-transition: background-color 0.1s, border 0.1s;
      transition: background-color 0.1s, border 0.1s;
      display: block;
        &:before {
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          width: 50px;
          height: 30px;
          border-radius: 15px;
          background-color: #FDFDFD;
          -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
          transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
          transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
          transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
        }
        &:after {
          content: " ";
          position: absolute;
          top: 0;
          left: 0;
          width: 30px;
          height: 30px;
          border-radius: 15px;
          background-color: #FFFFFF;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
          -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
          transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
          transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
          transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        }
    }
    .input {
      position: absolute;
      left: -9999px;
        &:checked ~ .box {
          border-color: #04BE02;
          background-color: #04BE02;
        }
        &:checked ~ .box:before {
          -webkit-transform: scale(0);
          transform: scale(0);
        }
        &:checked ~ .box:after {
          -webkit-transform: translateX(20px);
          transform: translateX(20px);
        }
    }