Edited at

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


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

:arrow_down: ON のとき

スクリーンショット 2019-04-17 16.25.46.png

:arrow_down: OFF のとき

スクリーンショット 2019-04-17 16.26.49.png

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;
}