{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "glas-button", "name": "Glas-Button", "name_en": "Glass button (frosted, liquid refraction, tinted, sheen)", "kurz": "Ein Glas-Button für die eine Buchungshandlung über dem Foto: unscharfer Saum mit Lichtkante, dichter Kern unter dem Text, in Chromium mit echter Randbrechung.", "kategorie": "Buttons", "kategorie_slug": "buttons", "kategorie_nr": 18, "bau_chat": "B", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "ruhig", "präzise", "luxuriös" ], "stimmung_roh": [ "luxuriös", "ruhig", "präzise" ], "technik": [ "css", "backdrop-filter", "svg", "canvas", "vanilla-js", "@property" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "mittel", "steckbrief": { "beschreibung": "Ein Button aus Glas für die eine Handlung über einem Foto oder Film. Ein schmaler Saum lässt den Hintergrund unscharf durchscheinen, eine Lichtkante zeichnet den Rand, ein Glanzpunkt folgt dem Zeiger, beim Drücken gibt das Glas leicht nach. Unter dem Text liegt ein dichter Kern, damit die Schrift auf jedem Bildausschnitt lesbar bleibt. In der Variante liquid bricht der Rand den Hintergrund wie eine Linse; das kann nur Chromium, die anderen Browser zeigen Frost.", "warum_es_wirkt": "Das Bild bleibt sichtbar, und trotzdem liegt der Button klar auf einer eigenen Ebene. Apple hat das Material 2025 als Liquid Glass bis hinunter zu Buttons und Schaltern eingeführt, viele kennen es also aus dem Betriebssystem. Lichtkante und Druckzustand geben dem Glas Gewicht, ohne dass eine Signalfarbe das Foto übertönt.", "wann_einsetzen": "Für eine einzelne Haupthandlung über Fotografie oder Film: „Verfügbarkeit prüfen“ im Foto-Hero eines Hotels, „Kollektion ansehen“ über einem Kampagnenbild, eine Aktion über einem Produktbild. Gut, wenn eine deckende Signalfläche das Bild zerschneiden würde.", "wann_nicht": "Auf einfarbigem hellem Grund, dort ist Glas unsichtbar. Nie mehr als ein Glas-Element pro Ansicht, also nicht zusammen mit Glas-Navigation. Nicht, wenn der Text im ungünstigsten Bildausschnitt unter 4,5:1 fällt. Nicht für Kanzlei, Praxis, Pflege, Handwerk. Nicht für Formular-Absenden in langen Formularen (dort button-zustaende).", "varianten": [ "frost: Unschärfe 12 px und Sättigung 1,6 hinter dem Glas, Lichtkante; läuft in allen aktuellen Browsern", "liquid: Rand bricht den Hintergrund per SVG-Displacement als backdrop-filter; nur Chromium, sonst Frost", "getoent: dunkler Markenton im Kern, heller Text, für die hervorgehobene Handlung (wie .glassProminent bei Apple)", "glanz: Lichtkante dreht zum Zeiger, ein Glanzband läuft einmal bei Hover oder Fokus über die Fläche" ], "umsetzung": "Echter