Interruptor de palanca de neón

3014 Andev.web

Abrir en el editor Video Publica tu código

Recomendado

18 March 2023

Formulario de inicio de sesión moderno

18 October 2025

Animación de interfaz de usuario de botón CSS Sxrgxx

17 May 2025

Un código de Maxi-Digital

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">

</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);
}

Recomendado

Formulario de inicio de sesión moderno

Animación de interfaz de usuario de botón CSS Sxrgxx

Un código de Maxi-Digital

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS