Der Einsatz von Ghost Buttons im Webdesign ist nach wie vor sehr beliebt. Besonders gut zur Geltung kommen die transparenten Buttons auf großen Hintergrund-Bildern. Wie einfach man einen Ghost Button mit ein paar Zeilen CSS erstellen kann, möchte ich in diesem Tutorial erklären.

Was sind Ghost Buttons?

Ghost Buttons sind farblose bzw. transparente Buttons mit einem schmalen Rand, bei denen der Hintergrund durchscheint. Daher werden sie gerne in Kombination mit Hero Images, also großen Bildern als Background,  oder Blurry Backgrounds genutzt. Durch die Transparenz und den dünnen Rand, wirken Ghost Buttons sehr minimalistisch und elegant. Oder auch geisterhaft und spooky. Auf jeden Fall sind diese Buttons ein Eye-Catcher und werden daher gerne als Call-To-Action Elemente genutzt.

Ghost Button erstellen

In diesem Tutorial erstelle ich einen einfachen Ghost Button mit CSS.

1. Button in HTML erzeugen

<a class="ghost_btn" href="#">Ghost Button</a>

2. Ghost Button mit CSS stylen

.ghost_btn {
    text-decoration: none;
    font-size: 150%;
    font-weight:600;
    color: #FFF ;
    border: 2px solid #FFF;
    padding: 0.65em 1.7em;
    display: inline-block;
    overflow: hidden;
    border-radius: 2px;
    transition: all 0.6s ease 0s;
    cursor: pointer;
 }

Die Stärke des Button Randes lässt sich ganz einfach über border festlegen.
Wer die Ecken des Buttons noch weiter abrunden möchte, kann den border-radius anpassen

3. Hover Effekt hinzufügen

Wenn man mit der Maus über den Button fährt, soll sich die Hintergrundfarbe des Ghost Buttons ändern. Je nach Geschmack und Farbschema der Seite, kann man hier eine geeignete Farbe auswählen.

Einfacher Farbwechsel

a.ghost_btn:hover{
  background:#fff;
  color: #000;
}

Halbtransparent

a.ghost_btn:hover{
   background: rgba(255, 255, 255, 0.5);
  color: #000;
}

4. Background festlegen

body {

 background-image: url("camera-man-dark.jpg");
 background-size: cover;
 background-repeat: no-repeat;
}

Damit der Ghost Button auch so richtig geisterhaft wirken kann, sollte er auf einem geeigneten Hintergrundbild platziert werden. Diese kann man bei den vielen kostenlosen Bildanbietern beziehen und anschließend noch etwas nachbearbeiten. Meistens genügt es schon, das Bild abzudunkeln oder den Farbton zu ändern.
Man sollte auf jeden Fall auf einen guten Kontrast achten.

Demo Ghost Button auf CodePen

Eine Demo des Buttons sowie den Code aus diesem Tutorial gibt es auch auf CodePen.

Inspiration: Webseiten mit Ghost Buttons

ghost buttons beispiel 01

Screenshot: transitions1020.com. Hier liegt der Ghost Button auf einem Video Background.

 

ghost buttons bsp 02

Screenshot: unionroom.com. Auch hier sind die Buttons auf einem Video Hintergrund platziert.

shopmyapp.com

Screenshot: shopmyapp.com. Ghost Button über einem Verlaufshintergrund.

ghost-button 05

derpixelist.de

ghost button 07

Screenshot: iuvo.si. Gleich 3 Ghostbuttons und passende Icons über abgedunkeltem Background.

ghost button 08

Screenshot: webtimiser.de

ghost button 06

Screenshot: www.thepixelage.com. Buttons auf Video Hitnergrund.