<div class="container">
<input type="checkbox" id="nonbinary">
<label class="toggle">
<input type="checkbox">
<div class="toggle__handle"><span></span></div>
</label>
<label for="nonbinary">🏳🌈</label>
</div>
*,
*:before,
*:after {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background-color: #e6e6e6;
}
.container {
display: flex;
gap: 2rem;
align-items: center;
> input {
display: none;
&:checked + .toggle {
.toggle__handle {
width: 100%;
transform: none;
left: 0%;
border-width: calc(var(--size) / 2);
border-color: white;
&:before {
scale: 1;
}
span {
top: 50%;
left: 50%;
transform: scale(0) translate(-50%, -50%);
}
}
}
}
> label:not(.toggle) {
position: absolute;
bottom: 2rem;
right: 2rem;
font-size: 2rem;
cursor: pointer;
transform: scale(1);
transition: all 1s cubic-bezier(.9,-0.7,.28,1.6);
&:hover {
transform: scale(1.2);
}
}
}
.toggle {
--size: 48px;
--thickness: calc(var(--size) / 7.5);
--c-1: #f4c2c2;
--c-2: #89cff0;
position: relative;
width: calc(var(--size) * 2 + var(--thickness));
border-radius: 9999px;
background-color: #fff;
padding: var(--thickness);
//box-shadow: 0 -5px 5px #fff, 0 5px 5px #ccc, inset 0 5px 5px #eee;
box-shadow: rgba(#fff, .7) -6px -6px 8px, rgba(#333, .35) 6px 6px 8px;
cursor: pointer;
input {
display: none;
&:checked + .toggle__handle {
--c: var(--c-2);
left: calc(100% - var(--size));
transform: rotate(-135deg);
span {
&:before, &:after {
bottom: 0;
transform-origin: bottom center;
height: calc(var(--size) / 2);
}
&:before {
transform: translate(calc(var(--thickness) / 3), calc(var(--thickness) / 2)) rotate(-45deg);
}
&:after {
transform: translate(calc(var(--thickness) / -3), calc(var(--thickness) / 2)) rotate(45deg);
}
}
}
}
&__handle {
--c: var(--c-1);
position: relative;
transition: all 1s cubic-bezier(.9,-0.7,.28,1.6);
left: 0%;
width: var(--size);
height: var(--size);
border-radius: 9999px;
border: var(--thickness) solid var(--c);
&:before {
content: "🏳️🌈";
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
scale: 0;
font-size: calc(var(--size) / 1.5);
line-height: 1;
transition: all 1s cubic-bezier(.9,-0.7,.28,1.6);
}
span {
position: absolute;
width: var(--thickness);
height: calc(var(--size) / 1.3);
background-color: var(--c);
top: 100%;
left: 50%;
transform: scale(1) translate(-50%, 0);
transition: all 1s cubic-bezier(.9,-0.7,.28,1.6);
&:before, &:after {
content: "";
position: absolute;
background-color: var(--c);
width: var(--thickness);
height: calc(var(--size) / 4);
transition: all 1s cubic-bezier(.9,-0.7,.28,1.6);
bottom: calc(var(--thickness) * 2);
}
&:before {
left: 0;
transform-origin: bottom left;
transform: rotate(-90deg);
}
&:after {
right: 0;
transform-origin: bottom right;
transform: rotate(90deg);
}
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.