Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.pug

Created Oct 26, 2017
Embed
What would you like to do?
Realistic toggle button
.background
.toggle-body
.toggle-btn
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