HTML + CSSCheckboxes

Fogón de gas

Un fogón visto desde arriba: al marcarlo el mando gira, salta una chispa y se enciende la corona de llamas azules.

Ajustes

16px
1x

Código

<label class="uvq02-gas"><input type="checkbox"><span class="bn" aria-hidden="true"><span class="gr"></span><span class="fl"><i style="--a:0deg;--i:0"></i><i style="--a:26deg;--i:1"></i><i style="--a:51deg;--i:2"></i><i style="--a:77deg;--i:3"></i><i style="--a:103deg;--i:4"></i><i style="--a:129deg;--i:5"></i><i style="--a:154deg;--i:6"></i><i style="--a:180deg;--i:7"></i><i style="--a:206deg;--i:8"></i><i style="--a:231deg;--i:9"></i><i style="--a:257deg;--i:10"></i><i style="--a:283deg;--i:11"></i><i style="--a:309deg;--i:12"></i><i style="--a:334deg;--i:13"></i></span><span class="cp"></span></span><span class="kn" aria-hidden="true"></span>Encender el fogón</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.

Versión Markdown con todo el código, para asistentes de IA

Más en Checkboxes

Ver todos: Checkboxes

Dónde usarlo

Este checkbox es un fogón de gas visto desde arriba, con placa de esmalte negro, parrilla de hierro, quemador y un mando cromado al lado. Al marcarlo, el mando gira un cuarto de vuelta a la izquierda, salta una chispa y se encienden catorce llamas azules una detrás de otra, que luego tiemblan con un brillo suave. Encaja en apps de cocina, controles de cocina conectada y temporizadores de recetas.

El color principal es la base de la llama y el brillo; el secundario, las puntas, así que funcionan el gas azul, un fuego de leña naranja o una llama verde de fantasía. Con movimiento reducido las llamas siguen encendidas pero quietas.