HTML + CSSBotones

Sobre con lacre

La carta baja dentro del sobre, la solapa se cierra y cae un sello de lacre antes de que el sobre vuelva a abrirse.

Ajustes

16px
1x

Código

<div class="uvq01-env"><button class="e" type="button"><span class="bk" aria-hidden="true"></span><span class="fl" aria-hidden="true"></span><span class="lt"><span>Enviar invitación</span></span><span class="fr" aria-hidden="true"></span><span class="sl" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"><path d="M12 4.5l2.2 4.6 5 .6-3.7 3.4 1 5-4.5-2.5-4.5 2.5 1-5-3.7-3.4 5-.6z"/></svg></span></button><span class="ok" role="status"></span><span class="msg" hidden>Enviada</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

Un botón de enviar con ceremonia: un sobre de papel kraft guarda una carta con tu etiqueta en cursiva. Al hacer clic la carta baja, la solapa se pliega encima en 3D y un sello de lacre granate con una estrella en relieve cae sobre la punta con un pequeño aplastamiento. Una línea de estado confirma el envío, también con lector de pantalla. Encaja en invitaciones, bodas y agradecimientos.

El color principal es el lacre y el secundario el papel, así que lacre azul marino sobre blanco u oro sobre negro son cambios rápidos. Deja la etiqueta en dos o tres palabras para que quepa en la tarjeta; el sobre se vuelve a abrir solo al cabo de unos segundos.