Rabattgutschein-Toast

Ein Toast in Form eines ausgeschnittenen Gutscheins mit Rabattcode und Kopieren-Button.

Einstellungen

Hauptfarbe#db2777

Zweitfarbe#fce7f3

Größe16px

Tempo1x

Text

Code

index.html

<div class="uv-qpc"><button type="button" class="fire">Erneut zeigen</button><div class="tt" role="status"><span class="lf"><b>-15 %</b><small>auf deine Bestellung</small></span><span class="rt"><small>Dein Code</small><code>VERANO26</code><button type="button" class="cp"><span class="a">Kopieren</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>Kopiert</span></button></span></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Toasts

Alle ansehen: Toasts

Animierte Toast-Benachrichtigung

ToastsReact + Motion

Elastischer Erfolgs-Toast

ToastsHTML + CSS

Toast mit Rückgängig-Button

ToastsHTML + CSS

Toast mit Upload-Fortschritt

ToastsHTML + CSS

Fehler-Toast mit Wackeln

ToastsHTML + CSS

Toast für neue Nachrichten

ToastsHTML + CSS

Gestapelte Toasts

ToastsHTML + CSS

Insel-Pillen-Toast

ToastsHTML + CSS

Wofür du ihn nutzen kannst

Exit-Angebote, Newsletter-Prämien und Rabatte auf die erste Bestellung wirken greifbarer, wenn sie wie ein Gutschein aussehen. Dieser Toast hat einen farbigen Abschnitt mit dem Prozentwert, mit CSS-Masken ausgestanzte Kerben, eine gestrichelte Abrisslinie und den Code in Monospace-Schrift. Der Kopieren-Button legt den Code in die Zwischenablage und bestätigt mit Haken.

Der Code ist der editierbare Text, er lässt sich also je Kampagne tauschen. Zeig den Toast einmal pro Besuch, damit er wie ein Geschenk wirkt.