Toast de éxito elástico
Un mensaje de éxito que sube rebotando desde abajo con un check verde, se queda un momento y se va.
Ajustes
Código
<div class="uv-zs"><button class="fire">Mostrar toast</button><div class="toast"><i>✓</i><span><b>Cambios guardados</b><small>Todo está sincronizado.</small></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
Dónde usarlo
Justo después de algo importante, lo que la gente quiere es una confirmación. En una app de banca, al enviar una transferencia, aparece «Transferencia enviada» con su check verde y una línea de detalle, y luego se va sola. Un toast de éxito en HTML y CSS con una entrada elástica que tranquiliza sin hacer ruido.
Úsalo para acciones que ya se han completado, no para las que siguen en marcha. Escribe el resultado, no la acción: «250 € enviados a Ana» dice más que «Éxito». Si el mensaje lleva un importe o una referencia, déjalo un poco más en pantalla.