Toast con cupón de descuento

Un toast con forma de cupón recortado, el código de descuento y un botón para copiarlo.

Ajustes

Color principal#db2777

Color secundario#fce7f3

Tamaño16px

Velocidad1x

Texto

Código

index.html

<div class="uv-qpc"><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><span class="lf"><b>-15 %</b><small>en tu pedido</small></span><span class="rt"><small>Tu código</small><code>VERANO26</code><button type="button" class="cp"><span class="a">Copiar</span><span class="b"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Copiado</span></button></span></div></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 Toasts

Ver todos: Toasts

Toast animado

ToastsReact + Motion

Toast de éxito elástico

ToastsHTML + CSS

Toast con deshacer

ToastsHTML + CSS

Toast de progreso de subida

ToastsHTML + CSS

Toast de error con sacudida

ToastsHTML + CSS

Toast de mensaje entrante

ToastsHTML + CSS

Toasts apilados

ToastsHTML + CSS

Toast píldora tipo isla

ToastsHTML + CSS

Dónde usarlo

Las ofertas de salida, los premios por suscribirse y los descuentos de primer pedido parecen más reales si tienen forma de cupón. Este toast lleva una matriz de color con el porcentaje, bordes con muescas recortadas con máscaras CSS, una línea discontinua de corte y el código en fuente monoespaciada. El botón copia el código y lo confirma con un check.

El código es el texto editable, así que se cambia fácil en cada campaña. Muestra el toast una vez por visita para que parezca un regalo y no una insistencia.