AIMRAN
✓Reserva confirmadaTodo está preparado
HTML + CSSToasts

Toast píldora tipo isla

Una pequeña cápsula negra se estira para mostrar el mensaje y vuelve a encogerse, como la Dynamic Island del iPhone.

Ajustes

16px
1x

Código

<div class="uv-zi"><button class="fire">Confirmar</button><div class="toast"><i>✓</i><span><b>Reserva confirmada</b><small>Todo está preparado</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

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 de cita en calendario

ToastsHTML + CSS

Dónde usarlo

Va bien en productos pensados para móvil que quieren sentirse nativos. En una app de reservas de restaurantes, en cuanto alguien confirma mesa, la cápsula crece desde un punto con «Reserva confirmada» y se cierra a los pocos segundos. Si buscabas una notificación estilo Dynamic Island en CSS, es esta.

Limita el texto a un título y una línea corta, porque la cápsula solo se abre hasta cierto punto. Donde mejor queda es arriba en el móvil; abajo en una web de escritorio, el guiño al iPhone se pierde.