HTML + CSSToggles
Power button toggle
A round button with the power icon that sinks in while a ring of light draws itself around it.
Settings
16px
1x
Code
<label class="uv-tpw"><input type="checkbox" role="switch"><span class="bt"><i class="rg"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 3.5v8"/><path d="M7.2 6.6a7 7 0 1 0 9.6 0"/></svg></span>Turn on the purifier</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 TogglesWhere to use it
Some switches deserve to look like a device. This one is a soft, neumorphic disc with the universal power symbol: when turned on, the disc sinks into the surface, the icon glows and a ring of color sweeps around the edge thanks to an animated conic gradient. It suits air purifiers, smart plugs, servers and media players.
The ring uses a registered CSS property so the angle animates smoothly in both directions. The surface adapts to light and dark themes, and the label next to it explains what will turn on.