Glas-Anmeldeformular
Eine gläserne Anmeldekarte mit durchscheinenden Feldern, Anmelde-Button und Passkey-Option.
Einstellungen
Code
<div class="uv-glg"><form class="cd"><p class="ti">Willkommen zurück</p><label><span>Mail</span><input type="email" autocomplete="email" placeholder="du@email.de"></label><label><span>Passwort</span><input type="password" autocomplete="current-password" placeholder="••••••••"></label><button type="submit" class="go">Anmelden</button><button type="button" class="pk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="9" r="3.5"/><path d="M3 20c0-3 2.2-5.5 5-5.5s5 2.5 5 5.5M15 10.5a2.5 2.5 0 1 1 3.5 2.3V18l-1 1-1-1 .6-1-.6-1 .6-1-.6-.8v-1.4A2.5 2.5 0 0 1 15 10.5z"/></svg>Passkey verwenden</button></form></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 Liquid Glass
Alle ansehen: Liquid GlassWofür du ihn nutzen kannst
Anmeldebildschirme sind oft der erste Eindruck einer App, und eine Glaskarte über einer kräftigen Aurora setzt einen hochwertigen Ton ohne schwere Bilder. Die Karte enthält eine Begrüßung, durchscheinende Felder für E-Mail und Passwort, die im Fokus heller werden, einen massiven weißen Anmelde-Button und einen zweiten Button für einen Passkey.
Die Felder haben passende autocomplete-Angaben, damit Browser und Passwortmanager sie füllen, und in der Demo wird das Formular nicht abgeschickt, damit du deine eigene Logik anbindest. Die Begrüßung änderst du im Textfeld.