Der Begriff „Ghost“ – also Geist – hat etwas mystisches. Und so konnte ich mir zunächst nichts darunter vorstellen, als ich von den sogenannten Ghost-Buttons gelesen habe. Sind es unsichtbare Buttons, die per JavaScript ausgelöst werden? Das wäre doch irgendwie ziemlich sinnlos.

Der Begriff Ghost-Button beschreibt ein Design-Konzept, bei dem Buttons auf ein Minimum reduziert werden. Sie werden jeglicher Effekte beraubt, besitzen keine Hintergrundfarbe und meist nur einen sehr dünnen Rand. Damit sind sie quasi ein Schatten ihrer selbst – ein Geist.

Das Ganze hört sich noch nicht sonderlich spannend an, kann aber richtig schick aussehen – und das nicht nur im minimalistischen Kontext. Je nach Platzierung des Ghost- oder auch „Naked-Buttons“, kann er zusammen mit Farben, Hintergrundbildern und Grafiken zu einem echten Eye-Catcher werden. Wir haben zehn Beispiele für den Einsatz von Ghost-Buttons für euch zusammengestellt:

Papaya ist eine Website, auf der Tickets für verschiedene Events und Festivals gebucht werden können. Hier kommen Ghost-Buttons zum Einsatz, um einen dezenten aber doch auffälligen Call-To-Action Button zu platzieren.

Papaya Webseite

Die Designer des Daten-Visualisierungs-Dienstes Visage nutzen Ghost-Buttons auf ihren Landingpages und schaffen so einen Kontrast zu dem Diagramm auf der rechten Seite. So kommen die als Call-To-Action-Elemente eingesetzten Ghost-Buttons sehr gut zur Geltung.

Visage Webseite

IUVO nutzt nicht nur eine Reihe von Ghost-Buttons, sondern setzt im gleichen Zug auch auf sogenannte Line-Icons, die das Design-Konzept unterstützen. Mit der hohen Schärfentiefe des Hintergrundbildes entsteht so ein sehr angenehmer Effekt.

IUVO Webseite

Auf seiner Website nutzt der Designer Charles-Axel Pauwels Ghost-Buttons, um seine Landingpage-Navigation zu realisieren. Hier kommt als weiteres Gestaltungsmittel ein stark weichgezeichnetes Hintergrundbild zum Einsatz.

Charles-Axel Pauwels

Der Designer Guillaume Mark kombiniert einen Ghost-Button mit einem Video als Vollbild-Hintergrund. Zwar bricht er hier mit dem „Gesetz“, dass die Buttons keine Hintergrundfarbe haben dürfen. Bei zehn Prozent Deckkraft fällt das aber kaum auf.

Guillaume Marq

Bei „The Distance“ kommt Farbe ins Spiel. Die an Neonlichter erinnernden Ghost-Buttons erweisen sich im Zusammenspiel mit den abgedunkeltem Hintergrund als echte Eye-Catcher.

The Distance

Auch Mode-Seiten greifen auf diesen Design-Baustein zurück. So zum Beispiel 20Jeans. Das Unternehmen nutzt Ghost-Buttons mit neutralen Hintergründen sowie Produkt- und Personenfotos bei der Gestaltung seiner Landingpages.

20 Jeans Webseite

Auch der Designer Richard Outram setzt für die Gestaltung des sofort sichtbaren Bereichs seiner Website wieder auf eine Kombination aus Ghost-Buttons und stark weichgezeichnetem Hintergrund. Für Call-To-Action-Elemente weiter unten auf der Seite greift er auf eine minimalistische Fassung der Buttons in Kombination mit einem weißen Hintergrund zurück.

Richard Outram

Kangomedia nutzt große Typografie im Zusammenspiel mit großen Hintergrundbildern, um die Aufmerksamkeit der Besucher zu erregen. Der minimalistische und zentral positionierte Ghost-Button geht aber auch hier nicht unter.

Kangomedia Webseite

Studio Up setzt auf Volltonfarben im Hintergrund und verzichtet auf den Einsatz von Fotos. Zusammen mit der großflächig angelegten Typografie kommt der Ghost-Button als zentrales Call-To-Action-Element gut zur Geltung.

Studio Up Webseite

Ob flat, skeuomorphic, bunt oder schwarz-weiß. Ästhetisches Design hat keine klaren Grenzen. Der Ghost-Button als Design-Baustein kann sich in jeder Designrichtung als optisch ansprechendes Element für die Website hervortun.

via www.onextrapixel.com