Pedestrian crossing button
The yellow box from a pedestrian crossing: pressing lights up WAIT, then a green walking figure appears.
Settings
Code
<div class="uvq01-xwk"><div class="sg" aria-hidden="true"><span class="w1">Wait</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>Walk</span></span></div><button class="pb" type="button" aria-label="Request to cross"><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">Push</span><span class="sr" role="status"></span></div>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 Buttons
See all ButtonsWhere to use it
Anyone who has waited at a crossing knows this object: a yellow metal box with screws in the corners, a black push button with a hand and a dot matrix sign. Pressing it lights WAIT in red, and after a moment the sign switches to a green walking figure that blinks before it resets. Each change is announced to screen readers. Fun for city guides and mobility apps.
The main color is the box, school bus yellow by default, and the secondary color is the WAIT light. The full cycle follows the speed setting, so you can make it feel like a slow suburban crossing or a busy downtown one.