Pill Toggle Button
クリックでON/OFFが切り替わるピルトグル。
HTML
<div class="toggle-wrap" id="toggle"> <div class="toggle-thumb"></div> </div>
CSS
.toggle-wrap {
width: 52px;
height: 28px;
background: #e5e5e5;
border-radius: 14px;
cursor: pointer;
padding: 3px;
transition: background .25s;
}
.toggle-wrap.active {
background: #1a1a1a;
}
.toggle-thumb {
width: 22px;
height: 22px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 4px rgba(0,0,0,.1);
transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.toggle-wrap.active .toggle-thumb {
transform: translateX(24px);
}
JavaScript
document.getElementById('toggle').addEventListener('click', function() {
this.classList.toggle('active');
});