Interruptor de palanca de neón

3,512 Andev.web

Abrir en el editor Publica tu código

Recomendado

11 July 2025

Menú de alternancia CSS con iconos de Font Awesome

25 August 2024

Efecto de flotar al beber refresco

23 August 2025

Página de inicio de sesión en turco HTML: Formulario de inicio de sesión

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