Matchstick button
A matchbox button: pressing strikes a spark and lights the match, pressing again blows it out with a wisp of smoke.
Settings
Code
<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">Turn on</span><span class="st" aria-hidden="true"></span></button>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
This toggle is drawn as the side of a matchbox, with a printed frame, a rough striker strip and a single match on the left. On hover the head glows, on click sparks fly and a CSS flame flickers above it while the box warms up. The head chars as it burns, and switching off sends up a curl of smoke. Great for candle shops or dark mode.
The main color is the flame and the secondary color is the match head, so a blue gas flame or a green head are easy variations. The state lives in aria-pressed, and with reduced motion the flame stays steady instead of flickering.