HTML + CSSBotones

Pulsador de semáforo

La caja amarilla del paso de peatones: al pulsar se enciende ESPERE y después aparece el peatón en verde.

Ajustes

16px
1x

Código

<div class="uvq01-xwk"><div class="sg" aria-hidden="true"><span class="w1">Espere</span><span class="w2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="13" cy="4" r="2" fill="currentColor"/><path d="M9 21l3-6 3 2v4"/><path d="M12 15l1-6-4 2-2 3"/><path d="M13 9l2.5 3 3 1"/></svg><span>Cruce</span></span></div><button class="pb" type="button" aria-label="Pedir paso"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0"/><path d="M14 10V4a2 2 0 0 0-4 0v2"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.3l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15"/></svg></button><span class="lb" aria-hidden="true">Pulse</span><span class="sr" role="status"></span></div>

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 Botones

Ver todos: Botones

Dónde usarlo

Quien haya esperado en un paso de peatones conoce este objeto: una caja metálica amarilla con tornillos en las esquinas, un pulsador negro con una mano y un letrero de puntos. Al pulsarlo se enciende ESPERE en rojo y al rato aparece un peatón verde que parpadea antes de volver al inicio. Cada cambio se anuncia a los lectores de pantalla. Divertido para guías urbanas y apps de movilidad.

El color principal es la caja, amarillo de autobús escolar por defecto, y el secundario la luz de ESPERE. El ciclo completo sigue el ajuste de velocidad, así que puede sentirse como un cruce tranquilo de barrio o uno del centro con prisa.