Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 26. Januar 2015

Minimalistisches Webdesign: Ghost-Buttons im Trend

Die Zeiten der Gloss- und 3D-Effekte sind – zumin­dest vor­erst – vor­bei. Beim Webdesign ist der­zeit vor allem Minimalismus ange­sagt. Das spie­gelt sich auch beim Aussehen von Buttons wie­der. Sogenannte Ghost-Buttons sind im Kommen und pas­sen per­fekt in die zurück­hal­ten­de Gestaltung vie­ler zeit­ge­mä­ßer Websites, die auf Flat-Design oder Material-Design set­zen. Der eigent­li­che Ghost-Button besteht nur aus einem meist dün­nen Rahmen und dem dar­in ste­hen­den Text. Weniger zurück­hal­tend lässt sich ein Button kaum gestal­ten – vor­aus­ge­setzt, man soll ihn auch noch als Button erken­nen kön­nen.

ghost-buttons-parallax-website
Website der Agentur „Parallax“ mit ein­fa­chem Ghost-Button

Einfach gestaltet und ausgezeichnet

Ghost-Buttons sind ein­fach gestal­tet und eben­so ein­fach und schnell per Stylesheets aus­ge­zeich­net. Bei klas­si­schen Buttons, die per „<but­ton>“- oder „<input>“-Element aus­ge­zeich­net wer­den, reicht es im Grunde aus, eine Rahmenfarbe zu set­zen und den Hintergrund zu ent­fer­nen. Standardmäßig sind die­se Elemente näm­lich immer mit einer Hintergrundfarbe aus­ge­stat­tet.

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

Nicht immer ist ein Button durch ein ent­spre­chen­des Button-Element aus­ge­zeich­net. Oft ver­ber­gen sich dahin­ter auch Links, die per „<a>“-Element aus­ge­zeich­net sind. Hier ist die Gestaltung eben­so ein­fach. Optisch unter­schei­den sich ech­te Buttons von ein­fa­chen Links dann nicht mehr.

Auf den Hintergrund kommt es an

Minimalismus allei­ne ist kein Garant für eine gut gestal­te­te Website. Das gilt auch für Ghost-Buttons. Das Umfeld muss pas­sen, damit Ghost-Buttons auch ele­gant wir­ken und vor allem auch auf­grund ihrer Schlichtheit nicht unter­ge­hen.

Da vor allem groß­for­ma­ti­ge Bilder der­zeit im Trend sind, las­sen sich Ghost-Buttons aus­ge­zeich­net in Kombination mit aus­drucks­star­ken Hintergrundbildern dar­stel­len.

In den meis­ten Fällen wer­den per Ghost-Buttons kei­ne klas­si­schen Button-Funktionen – wie das Versenden eines Formulars – aus­ge­löst. Meist sind es Links, die beson­ders her­vor­ge­ho­ben wer­den sol­len. Im Beispiel der bei­den Agenturen „Parallax“ und „Creative Ad Awards“ sind es die Links zu Arbeitsproben, die durch Ghost-Buttons dar­ge­stellt wer­den. Präsentiert wer­den die Buttons auf Bildern, die das Browserfenster (annä­hernd) aus­fül­len.

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

Neben groß­for­ma­ti­gen Bildern sieht man immer häu­fi­ger auch for­mat­fül­len­de Videos als Hintergrund. In Kombination mit die­sem Trend wir­ken Ghost-Buttons eben­falls sehr ein­drucks­voll – vor allem, weil sie auf­grund ihrer Schlichtheit wenig Platz brau­chen und dem Video wenig Sichtbarkeit neh­men. Stehen die Buttons in einem guten Kontrast zum Video, blei­ben sie trotz des ani­mier­ten Hintergrunds gut sicht­bar und fal­len auf.

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

Mit Details und Besonderheiten glänzen

Wer auf den Ghost-Button-Trend auf­sprin­gen will, soll­te zuse­hen, dass die Buttons trotz ihrer Schlichtheit den­noch etwas Besonderes haben. Gerade bei einem mini­ma­lis­ti­schen Design ist das immer eine Herausforderung. Daher soll­te man sich gut über­le­gen, wie man den Buttons eine eige­ne indi­vi­du­el­le Note hin­zu­fü­gen kann. Dank CSS3 sind hier der Kreativität kaum Grenzen gesetzt. Man kann mit abge­run­de­ten Ecken und Transparenzen arbei­ten, eine aus­drucks­star­ke Schriftart ver­wen­den und vor allem mit dezen­ten Animationen und Transitions auf­war­ten.

ghost-buttons-juvo-website
Website der Agentur „Iuvo“ mit ani­mier­ten Ghost-Buttons

Dabei müs­sen die Animationen nicht zwin­gend so auf­wen­dig sein, wie bei der Agentur „Iuvo“. Oft sind dezen­te Fade-in- und Fade-out-Effekte ele­gan­ter. Oder man lässt ein­fach den Rahmen des Ghost-Buttons ani­mie­ren – wie auf der Website des Entwicklers Nicolas Zezuka.

ghost-buttons-nzk-website
Website mit schlich­tem ani­mier­tem Ghost-Button

Ghost-Buttons nicht beschränkt auf einen Link

Der Einsatz von Ghost-Buttons muss bei wei­tem nicht dar­auf beschränkt sein, dass per Klick eine Seite gela­den wird. Er kann auch ver­wen­det wer­den, um die Funktion eines Radio-Buttons zu über­neh­men. Die Website der App „Couple“ nutzt Ghost-Buttons, um dar­über das Geschlecht aus­wäh­len zu kön­nen.

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

Bei vie­len Ghost-Buttons wer­den per Hover-Effekt Rahmenfarbe und -form ver­än­dert oder eine Hintergrundfarbe hin­ein ani­miert. Eine Alternative dazu ist, den Buttontext zu ani­mie­ren. Dieser kann bei­spiels­wei­se zu einer Seite hin ver­schwin­den. Bei Bedarf lässt sich auch wäh­rend des Hover-Status ein ande­rer Text ein­blen­den, um eine Zusatzinformation im Button unter­zu­brin­gen.

ghost-brahma-website
Website mit ani­mier­tem Buttontext

Fazit

Richtig in Szene gesetzt, kön­nen Ghost-Buttons sehr ein­drucks­voll sein. Die Beispiele zei­gen, dass vor allem der Hintergrund stim­men muss und klei­ne Animationseffekte für die indi­vi­du­el­le Note sor­gen. Je schlich­ter ein Design ist, des­to prä­gnan­ter muss es auch sein. Nur so hebt man sich ab und ver­hin­dert, im Design-Allerlei unter­zu­ge­hen.

(dpe)

Denis Potschien

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.

Ein Kommentar

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.