HTML + CSSToggles

Garden tap toggle

The red lever on a brass garden tap turns a quarter turn and a stream of water splashes onto the ground.

Settings

16px
1x

Code

<label class="uvq03-gtp"><input type="checkbox" role="switch"><span class="tp"><i class="pp"></i><i class="fl"></i><i class="bd"></i><i class="sp"></i><i class="sn"></i><i class="lv"></i><i class="wt"></i><i class="dr a"></i><i class="dr b"></i><i class="pd"></i></span>Garden watering</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.

Markdown version with all the code, for AI assistants

More in Toggles

See all Toggles

Where to use it

This switch is an outdoor brass tap with a pipe, a curved spout and a red quarter-turn lever, the kind you find on a garden wall. Turning it on swings the lever in line with the spout, a striped stream of water runs down, a couple of drops fall and a small puddle spreads with rings. It suits irrigation apps, smart garden controls and water saving settings.

The main color is the lever and the second one is the water. A blue lever reads as cold water, and a darker water tone works on light pages. Pair it with a short label about what the water does.