<div class="wrapper">
  <div class="checkbox_item citem_1">
    <div class="title">Basic Style</div>
    <label class="checkbox_wrap">
      <input type="checkbox" name="checkbox" class="checkbox_inp">
      <span class="checkbox_mark"></span>
    </label>
  </div>
  <div class="checkbox_item citem_2">
    <div class="title">Flat Style</div>
    <label class="checkbox_wrap">
      <input type="checkbox" name="checkbox" class="checkbox_inp">
      <span class="checkbox_mark"></span>
    </label>
  </div>
  <div class="checkbox_item citem_3">
    <div class="title">Skewed Style</div>
    <label class="checkbox_wrap">
      <input type="checkbox" name="checkbox" class="checkbox_inp">
      <span class="checkbox_mark"></span>
    </label>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Open Sans', sans-serif;
}

body{
  background: #f3f6f9;
}

.wrapper{
  max-width: 450px;
  width: 100%;
  margin: 100px auto 0;
  background: #fff;
  border-radius: 3px;
  padding: 50px;
}

.checkbox_item .title{
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e9ec;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 3px;
  margin-bottom: 25px;
  text-align: center;
}

.checkbox_item .checkbox_wrap{
  position: relative;
  display: block;
  cursor: pointer;
  width: 100px;
  margin: 0 auto 50px;
}

.checkbox_item:last-child .checkbox_wrap{
  margin-bottom: 0;
}

.checkbox_item .checkbox_wrap .checkbox_inp{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
}

.checkbox_item .checkbox_wrap .checkbox_mark{
  display: inline-block;
  position: relative;
  border-radius: 25px;
}

.checkbox_item .checkbox_wrap .checkbox_mark:before,
.checkbox_item .checkbox_wrap .checkbox_mark:after{
  content: "";
  position: absolute;
  transition: all 0.5s ease;
}



/* basic styles */
.checkbox_item.citem_1 .checkbox_wrap .checkbox_mark{
  background: #f0f0f0;
  width: 100px;
  height: 50px;
  padding: 2px;
}

.checkbox_item.citem_1 .checkbox_wrap .checkbox_mark:before{
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 50%;
}

.checkbox_item.citem_1 .checkbox_wrap .checkbox_inp:checked ~ .checkbox_mark{
  background: #34bfa3;
}

.checkbox_item.citem_1 .checkbox_wrap .checkbox_inp:checked ~ .checkbox_mark:before{
  left: 54px;
}

/* flat styles */
.checkbox_item.citem_2 .checkbox_wrap .checkbox_mark{
  border: 5px solid #f0f0f0;
  width: 100px;
  height: 50px;
  padding: 2px;
}

.checkbox_item.citem_2 .checkbox_wrap .checkbox_mark:before{
  top: 2px;
    left: 2px;
    width: 44px;
    height: 36px;
    background: #f0f0f0;
    border-radius: 25px;
}

.checkbox_item.citem_2 .checkbox_wrap .checkbox_inp:checked ~ .checkbox_mark{
  border-color: #34bfa3;
}

.checkbox_item.citem_2 .checkbox_wrap .checkbox_inp:checked ~ .checkbox_mark:before{
  left: 44px;
  background: #34bfa3;
}

/* skewed styles */
.checkbox_item.citem_3 .checkbox_wrap .checkbox_mark{
  width: 100px;
  height: 50px;
  padding: 2px;
  border-radius: 0;
  transform: skew(-10deg);
  overflow: hidden;
}

.checkbox_item.citem_3 .checkbox_wrap .checkbox_mark:before,
.checkbox_item.citem_3 .checkbox_wrap .checkbox_mark:after{
  top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 25px;
    color: #fff;
    font-weight: bold;
}

.checkbox_item.citem_3 .checkbox_wrap .checkbox_mark:before{
  content: "NO";
  background: #f0f0f0;
}

.checkbox_item.citem_3 .checkbox_wrap .checkbox_mark:after{
  content: "YES";
  left: -100px;
  background: #34bfa3;
}

.checkbox_item.citem_3 .checkbox_wrap .checkbox_inp:checked ~ .checkbox_mark:after{
  left: 0;
}

.checkbox_item.citem_3 .checkbox_wrap .checkbox_inp:checked ~ .checkbox_mark:before{
  left: 100px;
}