<label class="f">
	Rebels
	<input class="f__input" type="checkbox" name="faction" value="empire">
	<span class="f__switch">
		<span class="f__handle">
			<span class="f__1"></span>
			<span class="f__2">
				<span class="f__2a"></span>
				<span class="f__2b"></span>
				<span class="f__2c"></span>
				<span class="f__2d"></span>
				<span class="f__2e"></span>
			</span>
			<span class="f__3"></span>
			<span class="f__4"></span>
			<span class="f__5"></span>
			<span class="f__6"></span>
			<span class="f__7"></span>
			<span class="f__8"></span>
			<span class="f__9"></span>
			<span class="f__10"></span>
			<span class="f__11"></span>
			<span class="f__12"></span>
			<span class="f__13"></span>
			<span class="f__14"></span>
			<span class="f__15"></span>
			<span class="f__16"></span>
			<span class="f__17"></span>
		</span>
	</span>
	Empire
</label>
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--bg: #e3e4e8;
	--fg: #17181c;
	--primary: #255ff4;
	--switchBg: #c7cad1;
	font-size: calc(16px + (40 - 16) * (100vw - 320px) / (1280 - 320));
}
body, input {
	font: 1em/1.5 "Inter", sans-serif;
}
body {
	background: var(--bg);
	color: var(--fg);
	display: flex;
	height: 100vh;
}
/* Switch base */
.f, .f span {
	display: block;
}
.f {
	display: flex;
	cursor: pointer;
	align-items: center;
	margin: auto;
	-webkit-tap-highlight-color: transparent;
}
.f__input {
	position: fixed;
	top: -1.5em;
	left: -1.5em;
}
.f__handle, .f__handle span {
	transition-property: all;
	transition-timing-function: ease-in-out;
}
.f__handle, .f__switch {
	height: 3em;
}
.f__handle {
	clip-path: circle(50% at 50% 50%);
	position: relative;
	width: 3em;
	transition-duration: 0.4s;
}
.f__handle span {
	position: absolute;
	transition-duration: 0.2s;
}
.f__switch {
	background: var(--switchBg);
	border-radius: 1.5em;
	margin: 0 0.75em;
	width: 6em;
}
.f__input:focus {
	outline: 0;
}
.f__input:focus-visible + .f__switch {
	box-shadow: 0 0 0.25em var(--primary);
}
.f__input:checked + .f__switch .f__handle {
	transform: translateX(100%);
}
/* Shapes */
.f__1, .f__2a, .f__2b, .f__9, .f__10, .f__17 {
	border-radius: 50%;
}
.f__1, .f__handle > span:nth-child(n + 11) {
	background: #fff0;
}
.f__input:checked + .f__switch .f__1, 
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11) {
	background: #fff;
}
.f__1, .f__2, .f__2 span,
.f__input:checked + .f__switch .f__9,
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 11):nth-child(-n + 17) {
	transition-delay: 0.4s;
}
.f__1 {
	box-shadow: 0 -0.5em 0 0.4em #fa0012 inset;
	width: 3em;
	height: 3em;
}
.f__input:checked + .f__switch .f__1 {
	box-shadow: 0 0 0 0.1em #000 inset;
}
.f__2 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: 50% 100%;
}
.f__input:checked + .f__switch .f__2 {
	transform: scaleY(0);
}
.f__input:checked + .f__switch .f__handle > span:nth-child(-n + 2),
.f__input:checked + .f__switch .f__2 span {
	transition-delay: 0s;
}
.f__2a, .f__2b {
	box-shadow: 0 0 0 0.25em #fa0012 inset;
	top: 0.35em;
	width: 1.375em;
	height: 1.65em;
}
.f__input:checked + .f__switch .f__2 span:nth-child(-n + 2) {
	box-shadow: 0 0 0 0.25em #000 inset;
}
.f__2a {
	clip-path: polygon(0% 35%,100% 28%,100% 100%,0% 100%);
	left: 0.15em;
	transform: rotate(-45deg) skewX(-13deg);
}
.f__2b {
	clip-path: polygon(0 28%,100% 35%,100% 100%,0 100%);
	right: 0.15em;
	transform: rotate(45deg) skewX(13deg);
}
.f__input:checked + .f__switch .f__2c, 
.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
.f__10 {
	background-color: #000;
}
.f__2c {
	background-color: #fa0012;
	clip-path: polygon(50% 0%,80% 14%,61% 22%,60% 75%,100% 90%,100% 100%,0% 100%,0% 90%,40% 75%,39% 22%,20% 14%);
	top: 0;
	left: 1em;
	width: 1em;
	height: 2.2em;
}
.f__2d, .f__2e {
	top: 0.3em;
	width: 0.25em;
	height: 0.55em;
}
.f__2d {
	border-radius: 0% 100% 0% 100% / 100% 100% 0% 0%;
	box-shadow: -0.1em -0.05em 0 #fa0012 inset;
	left: 1.2em;
}
.f__input:checked + .f__switch .f__2d {
	box-shadow: -0.1em -0.05em 0 #000 inset;
}
.f__2e {
	border-radius: 100% 0% 0% 100% / 100% 100% 0% 0%;
	box-shadow: 0.1em -0.05em 0 #fa0012 inset;
	left: 1.55em;
}
.f__input:checked + .f__switch .f__2e {
	box-shadow: 0.1em -0.05em 0 #000 inset;
}
.f__handle > span:nth-child(n + 3):nth-child(-n + 8),
.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
	transform-origin: 50% 0;
}
.f__handle > span:nth-child(n + 3):nth-child(-n + 8) {
	top: 1.5em;
	left: 1.45em;
	width: 0.1em;
	height: 1.4em;
}
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__10 {
	transition-delay: 0.2s;
}
.f__3 {
	transform: translateY(-100%) scaleY(0);
}
.f__input:checked + .f__switch .f__3 {
	transform: translateY(-100%) scaleY(1);
}
.f__4 {
	transform: rotate(60deg) translateY(-100%) scaleY(0);
}
.f__input:checked + .f__switch .f__4 {
	transform: rotate(60deg) translateY(-100%) scaleY(1);
}
.f__5 {
	transform: rotate(120deg) translateY(-100%) scaleY(0);
}
.f__input:checked + .f__switch .f__5 {
	transform: rotate(120deg) translateY(-100%) scaleY(1);
}
.f__6 {
	transform: rotate(180deg) translateY(-100%) scaleY(0);
}
.f__input:checked + .f__switch .f__6 {
	transform: rotate(180deg) translateY(-100%) scaleY(1);
}
.f__7 {
	transform: rotate(240deg) translateY(-100%) scaleY(0);
}
.f__input:checked + .f__switch .f__7 {
	transform: rotate(240deg) translateY(-100%) scaleY(1);
}
.f__8 {
	transform: rotate(300deg) translateY(-100%) scaleY(0);
}
.f__input:checked + .f__switch .f__8 {
	transform: rotate(300deg) translateY(-100%) scaleY(1);
}
.f__9, .f__10, .f__17 {
	transform: scale(0);
}
.f__9 {
	background-image:
		conic-gradient( 
			#000 15deg,
			#fff 15deg 45deg,
			#000 45deg 75deg, 
			#fff 75deg 105deg,
			#000 105deg 135deg,
			#fff 135deg 165deg,
			#000 165deg 195deg,
			#fff 195deg 225deg,
			#000 225deg 255deg,
			#fff 255deg 285deg,
			#000 285deg 315deg,
			#fff 315deg 345deg,
			#000 345deg
		);
	top: 0.3em;
	left: 0.3em;
	width: 2.4em;
	height: 2.4em;
}
.f__10 {
	top: 0.5em;
	left: 0.5em;
	width: 2em;
	height: 2em;
}
.f__handle > span:nth-child(n + 3):nth-child(-n + 8), .f__input:checked + .f__switch .f__10 {
	transition-delay: 0.3s;
}
.f__input:checked + .f__switch .f__handle > span:nth-child(n + 9):nth-child(-n + 10),
.f__input:checked + .f__switch .f__17 {
	transform: scale(1);
}
.f__handle > span:nth-child(n + 11):nth-child(-n + 16) {
	clip-path: polygon(50% 0%,100% 100%,0% 100%);
	top: 1.5em;
	left: 1.32em;
	width: 0.36em;
	height: 0.9em;
}
.f__11 {
	transform: scaleX(0);
}
.f__input:checked + .f__switch .f__11 {
	transform: scaleX(1);
}
.f__12 {
	transform: rotate(60deg) scaleX(0);
}
.f__input:checked + .f__switch .f__12 {
	transform: rotate(60deg) scaleX(1);
}
.f__13 {
	transform: rotate(120deg) scaleX(0);
}
.f__input:checked + .f__switch .f__13 {
	transform: rotate(120deg) scaleX(1);
}
.f__14 {
	transform: rotate(180deg) scaleX(0);
}
.f__input:checked + .f__switch .f__14 {
	transform: rotate(180deg) scaleX(1);
}
.f__15 {
	transform: rotate(240deg) scaleX(0);
}
.f__input:checked + .f__switch .f__15 {
	transform: rotate(240deg) scaleX(1);
}
.f__16 {
	transform: rotate(300deg) scaleX(0);
}
.f__input:checked + .f__switch .f__16 {
	transform: rotate(300deg) scaleX(1);
}
.f__17 {
	top: 1.06em;
	left: 1.06em;
	width: 0.88em;
	height: 0.88em;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #2e3138;
		--fg: #e3e4e8;
		--primary: #5583f6;
		--switchBg: #454954;
	}
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Inter&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.