Realistic toggle button
const background = document.querySelector('.background'); | |
const toggleBody = document.querySelector('.toggle-body'); | |
const toggleBtn = document.querySelector('.toggle-btn'); | |
toggleBtn.addEventListener('click', () => { | |
background.classList.toggle('background--on'); | |
toggleBody.classList.toggle('toggle-body--on'); | |
toggleBtn.classList.toggle('toggle-btn--on'); | |
toggleBtn.classList.toggle('toggle-btn--scale'); | |
}); |
$pink: #FF8FDE; | |
$blue: #618BFF; | |
$animtime: 1.5s; | |
$easing: cubic-bezier(0.68, -0.15, 0.265, 1.35); | |
$iteration: 1; | |
.background { | |
width: 100vw; | |
height: 100vh; | |
position: relative; | |
background: $blue; | |
transition: 1.5s $easing; | |
} | |
.background--on { | |
background: $pink; | |
transition: 1.5s $easing; | |
} | |
.toggle-body { | |
width: 7rem; | |
height: 4rem; | |
position: absolute; | |
top: calc(50% - 4rem / 2); | |
left: calc(50% - 7rem / 2); | |
background: white; | |
border-radius: 2rem; | |
animation: angle-reverse $animtime $easing; | |
} | |
.toggle-body--on { | |
animation: angle $animtime $easing; | |
animation-direction: alternate; | |
} | |
.toggle-btn { | |
width: 2rem; | |
height: 2rem; | |
position: absolute; | |
top: calc(50% - 2rem / 2); | |
left: calc(27% - 2rem / 2); | |
background: white; | |
border-radius: 2rem; | |
background: $blue; | |
cursor: pointer; | |
transform: translateX(0); | |
transition: $animtime $easing; | |
} | |
.toggle-btn--on { | |
transition: $animtime $easing; | |
transform: translateX(150%); | |
background: $pink; | |
} | |
@keyframes angle { | |
0% { | |
transform: rotate(0deg); | |
} | |
50% { | |
transform: rotate(45deg); | |
} | |
100% { | |
transform: rotate(0deg); | |
} | |
} | |
@keyframes angle-reverse { | |
0% { | |
transform: rotate(0deg); | |
} | |
50% { | |
transform: rotate(-45deg); | |
} | |
100% { | |
transform: rotate(0deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment