t3n News Design

Mysterium erklärt: Das sind Ghost-Buttons – und so schön können sie sein

Mysterium erklärt: Das sind Ghost-Buttons – und so schön können sie sein

Beim Begriff Ghost-Buttons schaut man oft erst einmal in fragende Gesichter. Wir klären, was es mit dem Begriff auf sich hat und zeigen schicke Beispiele für die „mysteriösen“ Ghost-Buttons.

Mysterium erklärt: Das sind Ghost-Buttons – und so schön können sie sein

Ghostbuttons: Minimalistisch und trotzdem auffällig. (Screenshot: t3n/The Distance)

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

Papaya
Papaya nutzt Ghost-Buttons als Call-To-Action-Elemente. (Screenshot: t3n)

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

Visage

Visage Ghost-Button
Der Daten-Visualisierungs-Dienst Visage nutzt Ghost-Buttons auf den Landingpages. (Screenshot: t3n)

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

IUVO Ghost-Buttons
IUVO kombiniert Ghost-Buttons mit der Schärfentiefe eines Hintergrundbildes. (Screenshot: t3n)

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

Charles-Axel Pauwels

Charles-Axel Pauwels
Charles-Axel Pauwels kombiniert Ghost-Buttons mit weichgezeichneten Hintergründen. (Screenshot: t3n)

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

Guillaume Marq

Guillaume Marq
Der Designer Guillaume Marq nutzt ein Vollbild-Video mit einem Ghost-Button auf seiner Website. (Screenshot: t3n)

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

The Distance

The Distance
The Distance setzt auf Neon-Effekte und verschiedenfarbige Ghost-Buttons. (Screenshot: t3n)

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

20Jeans

20Jeans
20Jeans kombiniert Ghost-Buttons mit Produktbildern und Volltonfarben.

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

Richard Outram

Richard Outram Ghost-Buttons
Der Designer Richard Outram nutzt Ghost-Buttons auf seiner Webseite. (Screenshot: t3n)

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

Kangomedia Ghost Buttons
Kangomedia Ghost-Buttons. (Screenshot: t3n)

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

Studio Up Ghost Buttons
Studio Up setzt auf Vollton-Farben. (Screenshot: t3n)

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

Fazit

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

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
16 Antworten
  1. von Pascal am 25.05.2014 (14:14 Uhr)

    Sieht aus als wäre das das erste, was bei dem nächsten AB-Test zur CR-Steigerung wieder rausfliegt..

    Antworten Teilen
  2. von Michael am 25.05.2014 (15:42 Uhr)

    Was haltet ihr von den Buttons auf http://www.websaft.de ?

    Antworten Teilen
  3. von Buttontester am 25.05.2014 (17:18 Uhr)

    @Michael, schlicht & einfach


    Mies!

    Antworten Teilen
  4. von Rico Weigand am 25.05.2014 (20:57 Uhr)

    Hallo Ilja,

    interessant. Weisst du, ob es ein gutes Framework gibt, welches die Ghost-Buttons bereits unterstützt?

    Antworten Teilen
  5. von Ilja Zaglov am 25.05.2014 (22:03 Uhr)

    @Michael: Mir gefällt's. Aber die Schrift auf den Unterseiten ist viel zu klein

    @Rico: Wofür sollte man dafür ein Framework brauchen? Selbst ist die/der Frau/Mann.

    Antworten Teilen
  6. von fimbim am 25.05.2014 (22:48 Uhr)

    Ich finds auf jeden Fall witzig, einen ganzen Beitrag über einen Button zu schreiben, der anstatt background, nur nen border hat… 

    Antworten Teilen
  7. von Carsten am 26.05.2014 (09:22 Uhr)

    Ich finds super, bin nämlich manchmal doch recht faul und was Design angeht völlig unbegabt.

    "Nein, da fehlt nichts, das nennt sich 'Ghost Buttons'! Tssss".

    Klasse!

    Antworten Teilen
  8. von Till am 26.05.2014 (09:35 Uhr)

    Oh Mann, t3n!

    Ihr seid doch nicht soo klein, gell? Ist nicht böse gemeint, aber was macht ihr den ganzen Tag? :O

    Liebe Grüße,
    Till

    Antworten Teilen
  9. von Danny am 26.05.2014 (11:13 Uhr)

    Also ich wusste zwar noch nicht, dass man diese Buttons ghost buttons nennt, aber für mich persönlich nichts besonderes. Sind ja einfach nur buttons ohne Hintergrund und nur mit Border. In einigen der gezeigten Beispiele auch eher kontraproduktiv, da man sie teils schlecht lesen kann auf Grund des Hintergrundes.

    Meiner Meinung nach muss man bei solchen Buttons stark aufpassen wie man sie einsetzt: Zum einen vom Hintergrund abhängig, vom Content herum und ob User es überhaupt als Button wahrnehmen oder nicht doch eher als Input Feld. Kann mir auch vorstellen, dass die Klickraten geringer sind als bei gefüllten Buttons.

    @Michael: Die ganze Seite müsste überarbeitet werden. Die Buttons sind da noch das geringere Übel.

    Antworten Teilen
  10. von designnerd am 26.05.2014 (12:17 Uhr)

    Der Ghost-Button hat einzig und allein den Grund, vom Hintergrund (bspw. Foto einer Person), einer stärkeren Headline oder anderen Elementen nicht zu sehr abzulenken. Und daran ist eigentlich garnichts neu, besonders oder super.

    Antworten Teilen
  11. von Heiner am 26.05.2014 (13:06 Uhr)

    Das Sommerloch naht wieder. Es sind diese Artikel, die mich immer wieder von einem Abo der Zeitschrift abhalten.

    Antworten Teilen
  12. von Ghosthack am 26.05.2014 (19:49 Uhr)

    Wenn die Leute eins können, dann ist es rum heulen.
    Ich find den Artikel und die gezeigten Beispiele nicht schlecht, ist ein Trend den man in letzter Zeit immer öfters sieht, warum sollte man also nicht darrüber schreiben.

    Antworten Teilen
  13. von Jakobrohlaender am 27.05.2014 (19:08 Uhr)

    Interessant worüber man alles einen Artikel schreiben kann... Mit gefällt die Zusammenstellung der Screenshots gut.

    Antworten Teilen
  14. von Wolfgang am 30.05.2014 (01:50 Uhr)

    Bitte nicht mit Überschriften im Stile von Heftig und Co anfangen. Danke!

    Antworten Teilen
  15. von acebf68cb04fc438 am 09.02.2015 (00:15 Uhr)

    immer wieder schön zu hören, wie sich coder über design unterhalten und vor allem aufregen können :D

    Antworten Teilen
  16. von sebbler am 16.03.2015 (16:02 Uhr)

    Ich meine es müsste geringe Schärfentiefe lauten, bei der Kurzbeschreibung der IUVO Website! *klugscheiß*

    Liebe Grüße!

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Ghost
Ghost: Das Node.js-CMS bekommt eigenen Desktop-Client
Ghost: Das Node.js-CMS bekommt eigenen Desktop-Client

Das auf Node.js-basierende CMS Ghost verfügt jetzt auch über eigene Desktop-Clients für OS X, Windows und Linux. Wer viel mit dem minimalistischen Blog-System arbeitet, soll sich so den Umweg … » weiterlesen

„GHOST“: Schwere Sicherheitslücke betrifft die meisten Linux-Distributionen
„GHOST“: Schwere Sicherheitslücke betrifft die meisten Linux-Distributionen

Eine Sicherheitslücke mit dem Namen „GHOST“ sucht derzeit Linux heim. Viele Linux-Distributionen sind von der Sicherheitslücke betroffen. » weiterlesen

8 kleine Releases seit Ende August: Das ist neu bei Ghost
8 kleine Releases seit Ende August: Das ist neu bei Ghost

Ghost hat im vergangenen Jahr die Release-Politik umgestellt und setzt nun auf schnellere Release-Zyklen mit kleineren Neuerungen. Was sich seit dem letzten großen Update getan hat, zeigen wir euch … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?