Neon Toggle Switch

3,514 Andev.web

</head>
<body>
<label class="switch">
	<input class="switch__input" type="checkbox" role="switch">
	<span class="switch__base-outer"></span>
	<span class="switch__base-inner"></span>
	<svg class="switch__base-neon" viewBox="0 0 40 24" width="40px" height="24px">
		<defs>
			<filter id="switch-glow">
				<feGaussianBlur result="coloredBlur" stddeviation="1"></feGaussianBlur>
				<feMerge>
					<feMergeNode in="coloredBlur"></feMergeNode>
					<feMergeNode in="SourceGraphic"></feMergeNode>
				</feMerge>
			</filter>
			<linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0">
				<stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" />
				<stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" />
			</linearGradient>
			<linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1">
				<stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" />
				<stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" />
				<stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" />
			</linearGradient>
		</defs>
		<path fill="none" filter="url(#switch-glow)" stroke="url(#switch-gradient1)" stroke-width="1" stroke-dasharray="0 104.26 0" stroke-dashoffset="0.01" stroke-linecap="round" d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z"/>
	</svg>
	<span class="switch__knob-shadow"></span>
	<span class="switch__knob-container">
		<span class="switch__knob">
			<svg class="switch__knob-neon" viewBox="0 0 48 48" width="48px" height="48px">
				<circle fill="none" stroke="url(#switch-gradient2)" stroke-dasharray="0 90.32 0 54.19" stroke-linecap="round" stroke-width="1" r="23" cx="24" cy="24" transform="rotate(-112.5,24,24)" />
			</svg>	
		</span>
	</span>
	<span class="switch__led"></span>
	<span class="switch__text">Power</span>
</label>
  
</body>
</html>

CSS

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--off-hue: 3;
	--on-hue1: 123;
	--on-hue2: 168;
	--fg: hsl(var(--hue),10%,90%);
	--primary: hsl(var(--hue),90%,50%);
	--trans-dur: 0.6s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(40px + (60 - 40) * (100vw - 320px) / (2560 - 320));
}
body,
input {
	font: 1em/1.5 sans-serif;
}
body {
	background-image: linear-gradient(45deg,hsl(var(--hue),10%,20%), hsl(var(--hue),10%,10%));
	color: var(--fg);
	display: flex;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
.switch,
.switch__input {
	-webkit-tap-highlight-color: #0000;
}
.switch {
	display: block;
	margin: auto;
	position: relative;
	width: 5em;
	height: 3em;
}
.switch__base-outer,
.switch__base-inner {
	display: block;
	position: absolute;
}
.switch__base-outer {
	border-radius: 1.25em;
	box-shadow:
		-0.125em -0.125em 0.25em hsl(var(--hue),10%,30%),
		0.125em 0.125em 0.125em hsl(var(--hue),10%,30%) inset,
		0.125em 0.125em 0.25em hsl(0,0%,0%),
		-0.125em -0.125em 0.125em hsl(var(--hue),10%,5%) inset;
	top: 0.125em;
	left: 0.125em;
	width: 4.75em;
	height: 2.75em;
}
.switch__base-inner {
	border-radius: 1.125em;
	box-shadow:
		-0.25em -0.25em 0.25em hsl(var(--hue),10%,30%) inset,
		0.0625em 0.0625em 0.125em hsla(var(--hue),10%,30%),
		0.125em 0.25em 0.25em hsl(var(--hue),10%,5%) inset,
		-0.0625em -0.0625em 0.125em hsla(var(--hue),10%,5%);
	top: 0.375em;
	left: 0.375em;
	width: 4.25em;
	height: 2.25em;
}
.switch__base-neon {
	display: block;
	overflow: visible;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.switch__base-neon path {
	stroke-dasharray: 0 104.26 0;
	transition: stroke-dasharray var(--trans-dur) var(--trans-timing);
}
.switch__input {
	outline: transparent;
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-appearance: none;
	appearance: none;
}
.switch__input:before {
	border-radius: 0.125em;
	box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0);
	content: "";
	display: block;
	position: absolute;
	inset: -0.125em;
	transition: box-shadow 0.15s linear;
}
.switch__input:focus-visible:before {
	box-shadow: 0 0 0 0.125em var(--primary);
}
.switch__knob,
.switch__knob-container {
	border-radius: 1em;
	display: block;
	position: absolute;
}
.switch__knob {
	background-color: hsl(var(--hue),10%,15%);
	background-image:
		radial-gradient(88% 88% at 50% 50%,hsl(var(--hue),10%,20%) 47%,hsla(var(--hue),10%,20%,0) 50%),
		radial-gradient(88% 88% at 47% 47%,hsl(var(--hue),10%,85%) 45%,hsla(var(--hue),10%,85%,0) 50%),
		radial-gradient(65% 70% at 40% 60%,hsl(var(--hue),10%,20%) 46%,hsla(var(--hue),10%,20%,0) 50%);
	box-shadow:
		-0.0625em -0.0625em 0.0625em hsl(var(--hue),10%,15%) inset,
		-0.125em -0.125em 0.0625em hsl(var(--hue),10%,5%) inset,
		0.75em 0.25em 0.125em hsla(0,0%,0%,0.8);
	width: 2em;
	height: 2em;
	transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__knob-container {
	overflow: hidden;
	top: 0.5em;
	left: 0.5em;
	width: 4em;
	height: 2em;
}
.switch__knob-neon {
	display: block;
	width: 2em;
	height: auto;
}
.switch__knob-neon circle {
	opacity: 0;
	stroke-dasharray: 0 90.32 0 54.19;
	transition:
		opacity var(--trans-dur) steps(1,end),
		stroke-dasharray var(--trans-dur) var(--trans-timing);
}
.switch__knob-shadow {
	border-radius: 50%;
	box-shadow: 0.125em 0.125em 0.125em hsla(0,0%,0%,0.9);
	display: block;
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: 2em;
	height: 2em;
	transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__led {
	background-color: hsl(var(--off-hue),90%,70%);
	border-radius: 50%;
	box-shadow:
		0 -0.0625em 0.0625em hsl(var(--off-hue),90%,40%) inset,
		0 0 0.125em hsla(var(--off-hue),90%,70%,0.3),
		0 0 0.125em hsla(var(--off-hue),90%,70%,0.3),
		0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0.25em;
	height: 0.25em;
	transition:
		background-color var(--trans-dur) var(--trans-timing),
		box-shadow var(--trans-dur) var(--trans-timing);
}
.switch__text {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
}
.switch__input:checked ~ .switch__led {
	background-color: hsl(var(--on-hue1),90%,70%);
	box-shadow:
		0 -0.0625em 0.0625em hsl(var(--on-hue1),90%,40%) inset,
		0 -0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3),
		0 0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3),
		0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);
}
.switch__input:checked ~ .switch__base-neon path {
	stroke-dasharray: 52.13 0 52.13;
}
.switch__input:checked ~ .switch__knob-shadow,
.switch__input:checked ~ .switch__knob-container .switch__knob {
	transform: translateX(100%);
}
.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {
	opacity: 1;
	stroke-dasharray: 45.16 0 45.16 54.19;
	transition-timing-function: steps(1,start), var(--trans-timing);
}

Neon Toggle Switch

Recommended