AIMRAN
HTML + CSSToggles

LED strip toggle

As the knob slides across a dark track, a row of LEDs lights up one after another.

Settings

16px
1x

Code

<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>Garden lighting</label>

Prompt for AI

Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.

More in Toggles

See all Toggles

Elastic iOS toggle

TogglesHTML + CSS

Day and night toggle

TogglesHTML + CSS

ON / OFF toggle

TogglesHTML + CSS

Neon glow toggle

TogglesHTML + CSS

Toggle with cross and check

TogglesHTML + CSS

Neumorphic toggle

TogglesHTML + CSS

Wall light switch toggle

TogglesHTML + CSS

Liquid toggle

TogglesHTML + CSS

Where to use it

Five small LEDs sit inside a dark rubbery track. When switched on, the metal knob slides to the end and the LEDs light in sequence behind it with a cool glow, then switch off in reverse order when it slides back. It fits garden lighting, gaming peripherals, studio gear and any interface with a hardware personality.

Cyan and ice blue are the defaults, but warm amber or magenta look great too. The sequence is built with transition delays only, so it stays smooth and lightweight with no JavaScript involved.