Schöne Buttons und der Glas-Effekt: So baust du ein Interface, das teuer aussieht

Ganz einfach erklärt: warum ein Button teuer aussieht

Kennst du das Gefühl? Du landest auf einer Website - und alles will angefasst werden, alles atmet. Du öffnest die nächste - scheinbar dieselben Buttons, dieselben Blöcke, aber es fühlt sich an, als wärst du in einem Forum für Waschmaschinen-Reparaturen gelandet. Das liegt nicht am Budget und nicht an einem geheimen Plugin. Es liegt an einem Dutzend Kleinigkeiten. Einzeln sieht man sie kaum, zusammen ergeben sie genau diesen Effekt von „mit Liebe gemacht“.

Der Button ist der ehrlichste Geschmacks-Indikator. Ein kleines Rechteck, auf dem man sich nirgends verstecken kann. Man sieht sofort: Hat sich da jemand Gedanken über Details gemacht, oder hat jemand einfach ein graues Quadrat mit Farbe gefüllt und ist weitergezogen.

Wozu das wissen, wenn du dein Interface vibecodest

Du schreibst der KI „mach einen schönen Button“ - und kriegst irgendwas Mittelmäßiges. Weder Fisch noch Fleisch. Um das Ergebnis zu verbessern, musst du mit Worten benennen können, was genau fehlt. Sonst steckst du in der Rolle von „naja, mach es irgendwie besser“ fest - und das ist, ehrlich gesagt, keine Ansage.

• Du kannst diagnostizieren, warum ein fremdes (oder dein eigenes) Interface billig aussieht, und es gezielt reparieren statt aufs Geratewohl.
• Du lernst, ein klares Briefing zu geben: nicht „schöner“, sondern „füg einen weichen Schatten hinzu, einen Hover mit leichtem Anheben und eine feine Kontur an der Kante“.
• Du verstehst den angesagten Glas-Effekt von innen - und hörst auf, ihn überall hinzuklatschen. Und geklatscht wird er gerade von allen.
• Du trainierst dein Auge. Nach dieser Lektion fängst du an, Details zu bemerken, die vorher an dir vorbeigingen.

Neun von zehn „hässlichen“ Buttons liegen nicht an der falschen Farbe. Sie liegen an harten Schatten, null Reaktion auf den Cursor und einem toten, sofortigen Wechsel ohne Animation.

Was einen Button „teuer“ macht: Schicht für Schicht zerlegt

Jede Schicht ist klein. Aber nimm eine weg - und das Bild fällt auseinander. Gehen wir der Reihe nach.

Die Form des Buttons: abgerundete Ecken und Proportionen

Scharfe 90-Grad-Ecken sehen fast immer grob und altmodisch aus. Eine leichte Rundung macht den Button freundlich und modern. Ein Detail nur: Die Rundung muss bewusst sein - entweder sauber-weich oder ehrlich-rund (Pille). Das Dazwischen, dieses „ein bisschen nach Gefühl“, wirkt dagegen meistens zufällig.

Dann - Luft im Inneren. Der Text darf nicht an die Ränder stoßen. Die seitlichen Abstände sind deutlich größer als oben und unten. Das ist das Grundmerkmal eines Buttons, der mit Verstand gemacht wurde.

Der Schatten des Buttons: Hinweis auf Höhe, kein Klecks

Der Schatten ist nicht da, „weil er halt da sein soll“. Er sagt dem Auge eine Sache: Der Button ist über den Hintergrund angehoben, man kann ihn drücken. Und der Hauptfehler von Anfängern ist hier ein harter, dunkler Schatten direkt am Button. So fällt Licht in der echten Welt einfach nicht, und das Auge spürt das sofort.

Die Kontur des Buttons: die dünne Linie, die entscheidet

Kontur Kontur (border) - eine dünne Linie am Rand eines Elements. Bei Buttons macht man sie oft halbtransparent oder etwas heller als den Button selbst, um ihn vom Hintergrund abzusetzen, ohne ihn schwer wirken zu lassen. - der am meisten unterschätzte Kniff. Eine dünne, ein Pixel breite, leicht hellere Linie an der oberen Kante imitiert eine Lichtreflexion und gibt dem Button fast geschenkt Tiefe. Und eine halbtransparente Kontur rundherum setzt den Button sauber vom Hintergrund ab, wenn der Schatten knapp ist. Eine Kleinigkeit? Ja. Aber genau aus solchen Kleinigkeiten setzt sich alles zusammen.

Die Zustände Hover und Active: wo der Button lebendig wird

Ein statischer Button ist tot. Lebendig macht ihn die Reaktion auf dich. Mindestens - zwei Zustände:

• Hover Hover (Überfahren) - der Zustand, wenn der Cursor über dem Element ist, der Button aber noch nicht gedrückt wurde. Meist ändert man Helligkeit oder Schatten, manchmal hebt man das Element leicht an. (Cursor drübergefahren) - der Button taucht leicht auf: wird heller oder der Schatten wächst ein wenig. Als hätte er sich dir entgegengestreckt.
• Active Active (Drücken) - der Zustand im Moment des Klicks, solange der Button gedrückt gehalten wird. Üblicherweise drückt man ihn leicht ein: verkleinert den Schatten und schiebt ihn ein paar Pixel nach unten. (gedrückt) - der Button sinkt ein: der Schatten wird kleiner, er selbst rückt ein paar Pixel nach unten. Wie eine echte physische Taste unter dem Finger.

Liquid Glass: der Glas-Effekt, der wieder in Mode ist

Liquid Glass Liquid Glass (flüssiges Glas) - ein Interface-Stil mit halbtransparenten, verschwommenen Elementen, die aussehen wie Mattglas über dem Hintergrund. Apple hat ihn in seinen Systemen populär gemacht, aber die Idee selbst ist alt - man kennt sie längst unter dem Namen Glassmorphism. - das ist der Effekt von Mattglas: Das Element ist halbtransparent, und alles, was darunter liegt, verschwimmt, als würdest du durch ein beschlagenes Fenster schauen. Seit dieser Stil in den neuen Apple-Systemen gezeigt wurde, klatschen ihn alle buchstäblich überall hin. Und oft - völlig fehl am Platz.

Woraus sich der Glas-Effekt zusammensetzt

Glas braucht drei Dinge gleichzeitig, sonst liest es sich nicht:

• Das Verschwimmen dessen, was darunter liegt ( Blur Blur (Unschärfe) - beim Glas verschwimmt nicht das Element selbst, sondern der Hintergrund darunter. Im Web ist dafür die Eigenschaft backdrop-filter zuständig. Genau diese Unschärfe erzeugt den Mattglas-Effekt. des Hintergrunds). Das ist die „Mattigkeit“. Ohne sie wird das Glas zu einem ganz gewöhnlichen halbtransparenten Rechteck.
• Eine halbtransparente Schicht darüber. Eine leichte Füllung, durch die der verschwommene Hintergrund durchscheint. Nicht völlig transparent und nicht dicht - irgendwo dazwischen.
• Eine feine helle Kontur und ein Glanz an der Kante. Das ist die „Dicke des Glases“. Genau dieser Glanz an der Kante unterscheidet echtes Glas von einem trüben Fleck.

Wo Glas passt und wo es nur stört

Glas ist ein Kniff für die oberen Schichten: schwebende Panels, Menüs, aufpoppende Karten, Navigation über dem Inhalt. Überall, wo ein Element ehrlich über etwas anderem liegt. Die Haupt-Aktionsbuttons aus Glas zu machen, ist dagegen riskant: Transparenz senkt den Kontrast, und der Text wird leicht unleserlich. Lass den Hauptbutton dicht. Gib das Glas den zweitrangigen Elementen - dort ist es am richtigen Platz.

Fertige Briefings für die KI: Button und Glas

Du musst nicht mit den Händen in den Code. Aber eine Checkliste im Kopf zu haben - das hilft: So erklärst du der KI klar, was du willst. Hier sind zwei fertige Briefings. Nimm sie und probier sie aus.

Mach den Button teuer und modern. Leichte Rundung der Ecken. Die seitlichen Abstände deutlich größer als die vertikalen. Ein weicher, stark verschwommener, halbtransparenter Schatten mit Versatz nach unten, nicht schwarz. Eine feine helle Kontur an der oberen Kante für Tiefe. Beim Überfahren - der Button taucht leicht auf, wird heller, der Schatten wächst. Beim Drücken - er sinkt leicht ein, der Schatten verkleinert sich. Alle Übergänge geschmeidig, im Bruchteil einer Sekunde, ohne harte Sprünge.

Mach ein Panel im Liquid-Glass-Stil. Darunter muss ein lebendiger Hintergrund sein - ein Verlauf oder ein Foto, keine einfarbige Fläche. Das Verschwimmen des Hintergrunds unter dem Panel - der Mattglas-Effekt. Darüber - eine halbtransparente Schicht mittlerer Dichte. Eine feine helle Kontur an der Kante und ein leichter Glanz an der oberen Kante, als Imitation der Glasdicke. Ein weicher Schatten unten, damit das Panel als angehoben gelesen wird. Halt den Text innen kontrastreich und gut lesbar.

Häufige Fehler bei der Gestaltung von Buttons und Glas

• Ein harter schwarzer Schatten direkt am Button. Sieht aus wie ein Aufkleber. Verwisch den Schatten und mach ihn halbtransparent.
• Tote Zustände. Der Button reagiert überhaupt nicht auf den Cursor. Füg wenigstens einen leichten Hover hinzu - das ist die halbe Miete beim Gefühl von „teuer“.
• Sofortige Übergänge. Der Zustand wechselt ruckartig. Jeder Wechsel sollte geschmeidig sein, sonst sieht alles billig aus.
• Glas auf einfarbigem Hintergrund. Da gibt es nichts zum Verschwimmen, kein Effekt. Glas braucht einen lebendigen Hintergrund darunter.
• Übertreibung mit allem auf einmal. Riesige Schatten, knallige Verläufe, alles blinkt. Teuer liest sich Zurückhaltung, nicht die Menge der Effekte.
• Ein gläserner Hauptbutton mit blassem Text. Transparenz killt den Kontrast. Wichtige Elemente halt dicht und gut lesbar.