<div class="switch">
    <label>
      <input type="checkbox" class="checkbox" name="" id="">
      <span class="btn_box">
        <span class="btn"></span>
      </span>
      <span class="text">OFF / ON</span>
    </label>
   </div>

   <div class="switch">
    <label>
      <input type="checkbox" class="checkbox" name="" id="">
      <span class="btn_box">
        <span class="btn"></span>
      </span>
      <span class="text">OFF / ON</span>
    </label>
   </div>

   <div class="switch">
    <label>
      <input type="checkbox" class="checkbox" name="" id="">
      <span class="btn_box">
        <span class="btn"></span>
      </span>
      <span class="text">OFF / ON</span>
    </label>
   </div>

   <div class="switch">
    <label>
      <input type="checkbox" class="checkbox" name="" id="">
      <span class="btn_box">
        <span class="btn"></span>
      </span>
      <span class="text">OFF / ON</span>
    </label>
   </div>

.switch {
  margin: 0 auto;
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.btn_box {
  display: inline-block;
  width: 40px;
  height: 20px;
  border-radius: 100px; //座膠囊不要用百分比
  background-color: #cccccc;
  box-shadow: 0px 3px 2px rgba($color: #000000, $alpha: 0.2) inset;
  vertical-align: middle; //因為 display:inline-block 的特性，可以使用此語法。
  margin-right: 10px;
  .btn {
    display: block;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-left: 0;
    transition: all 0.5s;
    box-shadow: 1px 2px 5px rgba($color: #000000, $alpha: 0.3);
  }
}

.checkbox {
  position: absolute; //絕對定位沒有特別寫位置，元素不會亂跑，會留在原位。
  opacity: 0;
  // input[type='checkbox']
  &:checked + .btn_box {
    background-color: #5ee45e;
    .btn {
      margin-left: 20px;
    }
  }
}