CSS でシンプルなトグルボタンを実装

ON のとき

OFF のとき

haml

.form-toggle.half-cell
  = f.check_box :name
  = f.label :name, '.', class: 'clickable'

scss

$form-checked-color: #fe6970;
$form-unchecked-color: #f3f3f3;

//*** Toggle button ***//

.form-toggle {
  > input[type="checkbox"] {
    display: none;
  }
  > label {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 26px;
    color: transparent;
    background-color: $form-unchecked-color;
    border-radius: 15px;
    &:before {
      display: block;
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 10px;
      transition: 0.4s;
    }
  }
  > input[type="checkbox"]:checked + label {
    background-color: $form-checked-color;
    &:before {
      left: 27px;
    }
  }
}
.clickable {
  cursor: pointer;
}