Minimalistisches Webdesign: Ghost-Buttons im Trend

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Die Zeiten der Gloss- und 3D-Effekte sind – zumindest vorerst – vorbei. Beim Webdesign ist derzeit vor allem Minimalismus angesagt. Das spiegelt sich auch beim Aussehen von Buttons wieder. Sogenannte Ghost-Buttons sind im Kommen und passen perfekt in die zurückhaltende Gestaltung vieler zeitgemäßer Websites, die auf Flat-Design oder Material-Design setzen. Der eigentliche Ghost-Button besteht nur aus einem meist dünnen Rahmen und dem darin stehenden Text. Weniger zurückhaltend lässt sich ein Button kaum gestalten – vorausgesetzt, man soll ihn auch noch als Button erkennen können.

ghost-buttons-parallax-website
Website der Agentur „Parallax“ mit einfachem Ghost-Button

Einfach gestaltet und ausgezeichnet

Ghost-Buttons sind einfach gestaltet und ebenso einfach und schnell per Stylesheets ausgezeichnet. Bei klassischen Buttons, die per „<button>“- oder „<input>“-Element ausgezeichnet werden, reicht es im Grunde aus, eine Rahmenfarbe zu setzen und den Hintergrund zu entfernen. Standardmäßig sind diese Elemente nämlich immer mit einer Hintergrundfarbe ausgestattet.

input {
  background: none;
  border: 1px solid black;
  color: black;
}

Nicht immer ist ein Button durch ein entsprechendes Button-Element ausgezeichnet. Oft verbergen sich dahinter auch Links, die per „<a>“-Element ausgezeichnet sind. Hier ist die Gestaltung ebenso einfach. Optisch unterscheiden sich echte Buttons von einfachen Links dann nicht mehr.

Auf den Hintergrund kommt es an

Minimalismus alleine ist kein Garant für eine gut gestaltete Website. Das gilt auch für Ghost-Buttons. Das Umfeld muss passen, damit Ghost-Buttons auch elegant wirken und vor allem auch aufgrund ihrer Schlichtheit nicht untergehen.

Da vor allem großformatige Bilder derzeit im Trend sind, lassen sich Ghost-Buttons ausgezeichnet in Kombination mit ausdrucksstarken Hintergrundbildern darstellen.

In den meisten Fällen werden per Ghost-Buttons keine klassischen Button-Funktionen – wie das Versenden eines Formulars – ausgelöst. Meist sind es Links, die besonders hervorgehoben werden sollen. Im Beispiel der beiden Agenturen „Parallax“ und „Creative Ad Awards“ sind es die Links zu Arbeitsproben, die durch Ghost-Buttons dargestellt werden. Präsentiert werden die Buttons auf Bildern, die das Browserfenster (annähernd) ausfüllen.

ghost-buttons-createiveadawards-website
Website der Agentur „Creative Ad Awards“

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]

Neben großformatigen Bildern sieht man immer häufiger auch formatfüllende Videos als Hintergrund. In Kombination mit diesem Trend wirken Ghost-Buttons ebenfalls sehr eindrucksvoll – vor allem, weil sie aufgrund ihrer Schlichtheit wenig Platz brauchen und dem Video wenig Sichtbarkeit nehmen. Stehen die Buttons in einem guten Kontrast zum Video, bleiben sie trotz des animierten Hintergrunds gut sichtbar und fallen auf.

ghost-buttons-unionroom-website
Website der Agentur „Union Room“ mit Videohintergrund

Mit Details und Besonderheiten glänzen

Wer auf den Ghost-Button-Trend aufspringen will, sollte zusehen, dass die Buttons trotz ihrer Schlichtheit dennoch etwas Besonderes haben. Gerade bei einem minimalistischen Design ist das immer eine Herausforderung. Daher sollte man sich gut überlegen, wie man den Buttons eine eigene individuelle Note hinzufügen kann. Dank CSS3 sind hier der Kreativität kaum Grenzen gesetzt. Man kann mit abgerundeten Ecken und Transparenzen arbeiten, eine ausdrucksstarke Schriftart verwenden und vor allem mit dezenten Animationen und Transitions aufwarten.

ghost-buttons-juvo-website
Website der Agentur „Iuvo“ mit animierten Ghost-Buttons

Dabei müssen die Animationen nicht zwingend so aufwendig sein, wie bei der Agentur „Iuvo“. Oft sind dezente Fade-in- und Fade-out-Effekte eleganter. Oder man lässt einfach den Rahmen des Ghost-Buttons animieren – wie auf der Website des Entwicklers Nicolas Zezuka.

ghost-buttons-nzk-website
Website mit schlichtem animiertem Ghost-Button

Ghost-Buttons nicht beschränkt auf einen Link

Der Einsatz von Ghost-Buttons muss bei weitem nicht darauf beschränkt sein, dass per Klick eine Seite geladen wird. Er kann auch verwendet werden, um die Funktion eines Radio-Buttons zu übernehmen. Die Website der App „Couple“ nutzt Ghost-Buttons, um darüber das Geschlecht auswählen zu können.

ghost-buttonsalice-website
Website mit Radio-Ghost-Button

Bei vielen Ghost-Buttons werden per Hover-Effekt Rahmenfarbe und -form verändert oder eine Hintergrundfarbe hinein animiert. Eine Alternative dazu ist, den Buttontext zu animieren. Dieser kann beispielsweise zu einer Seite hin verschwinden. Bei Bedarf lässt sich auch während des Hover-Status ein anderer Text einblenden, um eine Zusatzinformation im Button unterzubringen.

ghost-brahma-website
Website mit animiertem Buttontext

Fazit

Richtig in Szene gesetzt, können Ghost-Buttons sehr eindrucksvoll sein. Die Beispiele zeigen, dass vor allem der Hintergrund stimmen muss und kleine Animationseffekte für die individuelle Note sorgen. Je schlichter ein Design ist, desto prägnanter muss es auch sein. Nur so hebt man sich ab und verhindert, im Design-Allerlei unterzugehen.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Tom
Gast

Nach Flat kommt Ghost? Bald sehen wir nur noch eine große Outline auf dem Bildschirm…

wpDiscuz