Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Colorful Switch (CSS Only)
<div class="switch">
<input type="checkbox" class="switch__checkbox" id="switch-cb" />
<label class="switch__label" for="switch-cb">
<span class="switch__bg"></span>
<span class="switch__dot"></span>
<span class="switch__on">
<span class="switch__on__inner"></span>
</span>
<span class="switch__off"></span>
</label>
</div>
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #24282C;
}
$w: 280px;
$h: 120px;
$br: 50px;
$outerOffset: 5px;
$animTime: 0.5s;
$dotS: 8px;
$dotLeft: 204px;
$dotLeftOffset: -125px;
$offS: 64px;
$cubIn: cubic-bezier(.52,-0.96,.51,1.28);
$cubOut: cubic-bezier(.67,-0.16,.47,1.61);
@mixin switchOn() {
.switch__checkbox:checked ~ .switch__label & {
@content;
}
}
.switch {
position: absolute;
left: 50%;
top: 50%;
width: $w;
height: $h;
margin-left: $w/-2;
margin-top: $h/-2;
border-radius: $br;
background: #cfcfcf;
&:before {
content: "";
z-index: -1;
position: absolute;
left: -$outerOffset;
top: -$outerOffset;
width: $w + $outerOffset*2;
height: $h + $outerOffset*2;
border-radius: $br + $outerOffset;
background: #314239;
transition: background-color 0.3s;
}
&:hover:before {
background: #4C735F;
}
&__checkbox {
z-index: -10;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
&__label {
z-index: 1;
overflow: hidden;
position: absolute;
width: 100%;
height: 100%;
border-radius: $br;
cursor: pointer;
}
&__bg {
position: absolute;
left: 0;
top: 0;
width: $w * 3;
height: 100%;
background: linear-gradient(90deg, #14DCD6 0, #10E7BD $w, #EF9C29 $w*2, #E76339 100%);
transition: transform $animTime;
transform: translate3d($w*-2,0,0);
@include switchOn {
transform: translate3d(0,0,0);
}
}
&__dot {
position: absolute;
left: $dotLeft;
top: 50%;
width: $dotS;
height: $dotS;
margin-left: $dotS/-2;
margin-top: $dotS/-2;
border-radius: 50%;
background: #fff;
transition: transform $animTime;
transform: translate3d(0,0,0);
@include switchOn {
transform: translate3d($dotLeftOffset,0,0);
}
}
&__on {
position: absolute;
left: 177px;
top: 35px;
width: 30px;
height: 56px;
transition: transform $animTime;
transform: translate3d(0,0,0);
@include switchOn {
transform: translate3d($dotLeftOffset,0,0);
}
&__inner {
position: absolute;
width: 100%;
height: 100%;
transition: transform $animTime/2 0s $cubIn;
transform-origin: 100% 50%;
transform: rotate(45deg) scale(0) translateZ(0);
@include switchOn {
transition: transform $animTime/2 $animTime/2 $cubOut;
transform: rotate(45deg) scale(1) translateZ(0);
}
&:before,
&:after {
content: "";
position: absolute;
border-radius: $dotS/2;
background: #fff;
}
&:before {
left: 0;
bottom: 0;
width: 100%;
height: $dotS+1px;
}
&:after {
right: 0;
top: 0;
width: $dotS+1px;
height: 100%;
}
}
}
&__off {
position: absolute;
left: $dotLeft;
top: 50%;
width: $offS;
height: $offS;
margin-left: $offS/-2;
margin-top: $offS/-2;
transition: transform $animTime;
transform: translate3d(0,0,0);
@include switchOn {
transform: translate3d($dotLeftOffset,0,0);
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: $dotS;
margin-top: $dotS/-2;
border-radius: $dotS/2;
background: #fff;
transition: transform $animTime/2 $animTime/2;
@include switchOn {
transition-delay: 0s;
}
}
&:before {
transform: rotate(45deg) scaleX(1) translateZ(0);
@include switchOn {
transform: rotate(45deg) scaleX(0) translateZ(0);
}
}
&:after {
transition-timing-function: $cubOut;
transform: rotate(-45deg) scaleX(1) translateZ(0);
@include switchOn {
transition-timing-function: ease;
transform: rotate(-45deg) scaleX(0) translateZ(0);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.