Toggle de luces LED

Al deslizar la bola por un carril oscuro, una fila de LEDs se enciende uno detrás de otro.

Ajustes

Color principal#00b8ff

Color secundario#a8ecff

Tamaño16px

Velocidad1x

Texto

Código

index.html

<label class="uv-tld"><input type="checkbox" role="switch"><span class="tr"><span class="ld"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span><span class="kn"></span></span>Iluminación del jardín</label>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Toggles

Ver todos: Toggles

Toggle iOS elástico

TogglesHTML + CSS

Toggle día y noche

TogglesHTML + CSS

Interruptor ON / OFF

TogglesHTML + CSS

Interruptor neón

TogglesHTML + CSS

Toggle con cruz y check

TogglesHTML + CSS

Toggle neumórfico

TogglesHTML + CSS

Interruptor de pared

TogglesHTML + CSS

Toggle líquido

TogglesHTML + CSS

Dónde usarlo

Cinco LEDs pequeños viven dentro de un carril oscuro con tacto de goma. Al activarlo, la bola metálica se desliza hasta el final y los LEDs se encienden en secuencia detrás de ella con un brillo frío; al volver, se apagan en orden inverso. Encaja en iluminación de jardín, periféricos gaming, equipo de estudio y cualquier interfaz con personalidad de hardware.

Por defecto usa cian y azul hielo, pero el ámbar cálido o el magenta quedan muy bien. La secuencia se hace solo con retrasos de transición, sin JavaScript.