HTML + CSSToggles
Botón de encendido
Un botón redondo con el icono de power que se hunde mientras un anillo de luz se dibuja a su alrededor.
Ajustes
16px
1x
Código
<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>Encender el purificador</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: TogglesDónde usarlo
Algunos interruptores merecen parecer un aparato. Este es un disco neumórfico suave con el símbolo universal de encendido: al activarlo, el disco se hunde en la superficie, el icono brilla y un anillo de color recorre el borde gracias a un degradado cónico animado. Encaja en purificadores de aire, enchufes inteligentes, servidores y reproductores.
El anillo usa una propiedad CSS registrada para que el ángulo se anime suave en los dos sentidos. La superficie se adapta a modo claro y oscuro y la etiqueta explica qué se enciende.