Rubber stamp approval button
On approve, a red rubber stamp lands on the invoice with worn ink and the paper jumps a little from the impact.
Settings
Code
<div class="uvq01-stp"><div class="doc" aria-hidden="true"><svg class="fx" width="0" height="0"><filter id="uvq01-grit"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="2" seed="7"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.75"/><feComposite in="SourceGraphic" operator="in"/></filter></svg><span class="h"><b>Invoice</b><span>0187</span></span><span class="ln"></span><span class="ln s"></span><span class="ln m"></span><span class="tt"><span>Amount</span><b>1.240,00 €</b></span><span class="mk">APPROVED</span></div><button class="bt" type="button" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.5 3.5h5l-.8 6h-3.4z"/><path d="M5 13.5c0-2.2 1.8-4 4-4h6c2.2 0 4 1.8 4 4v1.5H5z"/><path d="M6 19h12"/></svg><span>Approve</span></button></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
Approval flows are often a plain checkbox, and this block gives them weight: a cream invoice card sits above a dark button, and pressing it slams a red APPROVED stamp onto the paper. An SVG noise filter wears the ink like a real rubber stamp, and the card shakes on impact. Pressing again lifts the stamp, with aria-pressed telling assistive tech the current state.
The main color is the ink and the secondary color is the paper, so blue or green stamps for other statuses are a quick change. Swap the invoice lines for your own data, and keep the stamp word short so it fits at an angle.