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.
Inspiration: Webseiten mit Ghost Buttons
