Sello de goma
Al aprobar, un sello rojo cae sobre la factura con la tinta gastada y el papel da un pequeño salto por el golpe.
Ajustes
Código
<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>Factura</b><span>0187</span></span><span class="ln"></span><span class="ln s"></span><span class="ln m"></span><span class="tt"><span>Importe</span><b>1.240,00 €</b></span><span class="mk">APROBADO</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>Aprobar</span></button></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.
Más en Botones
Ver todos: BotonesDónde usarlo
Los flujos de aprobación suelen quedarse en una casilla y este bloque les da peso: una factura crema sobre un botón oscuro y, al pulsarlo, un sello rojo de APROBADO golpea el papel. Un filtro de ruido en SVG desgasta la tinta como en un sello real y la tarjeta tiembla con el impacto. Al pulsar otra vez el sello se levanta y aria-pressed indica el estado.
El color principal es la tinta y el secundario el papel, así que un sello azul o verde para otros estados es un cambio rápido. Cambia las líneas de la factura por tus datos y deja la palabra del sello corta para que quepa inclinada.