Botón de cerilla
Una caja de cerillas: al pulsar salta una chispa y la cerilla se enciende; otra pulsación la apaga con un hilo de humo.
Ajustes
Código
<button class="uvq01-mch" type="button" aria-pressed="false"><span class="m" aria-hidden="true"><span class="fl"><i></i><i></i></span><span class="sm"></span></span><span class="t">Encender</span><span class="st" aria-hidden="true"></span></button>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 Botones
Ver todos: BotonesDónde usarlo
Este interruptor está dibujado como el lateral de una caja de cerillas, con marco impreso, banda rugosa para rascar y una cerilla a la izquierda. Al pasar el ratón la cabeza brilla, al hacer clic saltan chispas y una llama en CSS tiembla encima mientras la caja se calienta. La cabeza se carboniza y al apagarla sube un hilo de humo. Ideal para tiendas de velas o un modo oscuro.
El color principal es la llama y el secundario la cabeza de la cerilla, así que una llama azul de gas o una cabeza verde son variaciones fáciles. El estado vive en aria-pressed y, con el movimiento reducido, la llama queda quieta en lugar de temblar.