Anzeige
Anzeige
UX & Design
Artikel merken

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.

Von Ilja Zaglov
3 Min. Lesezeit
Anzeige
Anzeige

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.

Anzeige
Anzeige

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:

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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

Anzeige
Anzeige

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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
16 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Pascal

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

Antworten
Michael

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

Antworten
Buttontester

@Michael, schlicht & einfach

Mies!

Antworten
Rico Weigand

Hallo Ilja,

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

Antworten
Ilja Zaglov

@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
fimbim

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

Antworten
Carsten

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
Till

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
Danny

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
designnerd

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
Heiner

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

Antworten
Ghosthack

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
Jakob Rohländer

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

Antworten
Wolfgang

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

Antworten
astrid692

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

Antworten
sebbler

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

Liebe Grüße!

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige