Geister-Buttons als beliebter Webdesign-Trend im Jahr 2014
Image may be NSFW.
Clik here to view.
Einer der sehr interessanten und optisch tollen Webdesign-Trends des Jahres 2014 sind sogenannte “Geister Buttons”. Das sind keine übersinnlichen Tricksereien, sondern ganz einfache CSS-Buttons mit einem Rahmen und einer transparenten Hintergrundfarbe. So richtig zur Geltung kommen diese CSS-Links erst dann, wenn Sie auf der Webseite eine wunderschöne Hintergrundgrafik einsetzen.
Im folgenden Tutorial werde ich Ihnen zeigen, wie Sie einige Arten von Geister-Buttons mit CSS erstellen.
3 Beispiel-Webseiten mit “Ghost Buttons”
Einleitend zeige ich Ihnen, was mit den transparenten CSS-Buttons eigentlich gemeint ist.
[Grafiken anklicken, um zum jeweiligen Internetauftritt zu gelangen!]
We Are Heckford
Image may be NSFW.
Clik here to view.
Icon PR
Image may be NSFW.
Clik here to view.
Lees Ferry
Image may be NSFW.
Clik here to view.
Mit Blick auf die obigen Beispiele (und auf viele andere im Web) kann man einige wichtige Gemeinsamkeiten zwischen den Ghost-Buttons erkennen:
Fotohintergrund:
Die “Geister Buttons” kommen ausgezeichnet zur Geltung, wenn der Webseiten-Hintergrund mit einem großen Bild/Foto festgelegt wird. Erst dadurch wird es für den Benutzer möglich, einen interessanten visuellen Effekt anzusehen.
Weiß als beliebte Geistertasten-Farbe:
Prinzipiell kann man für die Buttons jede Farbe verwenden und so an Ihr Design-Projekt anpassen, aber die Tendenz geht eindeutig zu einem weißen Text mit weißem Rand.
CSS-Übergänge:
Durch den Einsatz subtiler CSS-Übergangseffekte kann die Interaktion mit den Ghost-Buttons entscheidend beeinflusst und verbessert werden.
“Geister Buttons”: Demo ansehen
In meinem Tutorial können Sie alle 8 Beispiele der Ghost-Buttons auf meiner Muster-Seite ansehen.
Image may be NSFW.
Clik here to view.
HTML
Zur Beschreibung des Geister-Buttons verwende ich das HTML-Element <a>
<a class="ghost-button" href="#">Ghost button text</a>
CSS
Nachfolgend sehen Sie die CSS-Anweisungen für die gesamten 8 Geister-Buttons.
1. Basis Geister Buttons
Grundeinstellung für die Basis-Variante
.ghost-button {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button:hover,
.ghost-button:active {
background-color: #fff;
color: #000;
}
2. Abgerundete Ecken
Bei den abgerundeten Ecken kommt die Anweisung border-radius dazu.
.ghost-button-rounded-corners {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
}
.ghost-button-rounded-corners:hover,
.ghost-button-rounded-corners:active {
background-color: #fff;
color: #000;
}
3. Einfacher Übergangseffekt
Bei dieser Variante verwenden wir die CSS-Eigenschaft transition zum Einblenden / Ausblenden der Rahmen- und Hintergrundfarbe der Geistertaste.
.ghost-button-transition {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.ghost-button-transition:hover,
.ghost-button-transition:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
4. Dicker Rahmen
Mit der Anweisung border: 3px solid #fff wird der Rahmen des Buttons verstärkt.
.ghost-button-thick-border {
display: inline-block;
width: 200px;
font-weight: bold;
padding: 8px;
color: #fff;
border: 3px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.ghost-button-thick-border:hover,
.ghost-button-thick-border:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}
5. Einblendung Halb-Transparent
Man erreicht diesen Effekt durch die Verwendung der rgba () -Funktion in den CSS-Styles :hover und :active. Die Farbe für den Hintergrund und den Rahmen ist weiß mit 40% Deckkraft.
.ghost-button-semi-transparent {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
border-color 0.2s ease-out;
}
.ghost-button-semi-transparent:hover,
.ghost-button-semi-transparent:active {
background-color: #fff; /* fallback */
background-color: rgba(255, 255, 255, 0.4);
border-color: #fff; /* fallback */
border-color: rgba(255, 255, 255, 0.4);
transition: background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
6. Einblendung Farb-Rahmen
Ein sehr beliebter Übergangseffekt ist die Veränderung des Rahmens und der Textfarbe in eine andere Farbe. Das kann man ganz einfach mit der CSS-Eigenschaft transition bewerkstelligen.
.ghost-button-border-color {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: border-color 0.3s ease-out,
color 0.3s ease-out;
}
.ghost-button-border-color:hover,
.ghost-button-border-color:active {
color: #66d8ed;
border-color: #66d8ed;
transition: border-color 0.4s ease-in,
color 0.4s ease-in;
}
7. Einblendung Farb-Button
Hier wird im Gegensatz zu Beispiel 6 auch die Hintergrund-Farbe des Buttons mitverändert.
.ghost-button-full-color {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
background-color: transparent;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: color 0.3s ease-out,
background-color 0.3s ease-out,
border-color 0.3s ease-out;
}
.ghost-button-full-color:hover,
.ghost-button-full-color:active {
background-color: #9363c4;
border-color: #9363c4;
color: #fff;
transition: color 0.3s ease-in,
background-color 0.3s ease-in,
border-color 0.3s ease-in;
}
8. Größen-Änderung
Ein anderer Weg, um den Link interessant zu machen, führt über die Änderung der Größe des Geister-Buttons, sobald man mit der Maus darüberfährt.
.ghost-button-size-transition {
display: inline-block;
width: 200px;
height: 25px;
line-height: 25px;
margin: 0 auto;
padding: 8px;
color: #fff;
border: 2px solid #fff;
text-align: center;
outline: none;
text-decoration: none;
transition: width 0.3s ease-out,
height 0.3s ease-out,
line-height 0.3s ease-out;
}
.ghost-button-size-transition:hover,
.ghost-button-size-transition:active {
width: 220px;
height: 45px;
line-height: 45px;
transition: width 0.1s ease-in,
height 0.1s ease-in,
line-height 0.1s ease-in;
}
Zusammenfassung – Fazit
Der Trend zur Erstellung von “Geister Buttons” ist derzeit sehr beliebt. Wie Sie gesehen haben, ist es ziemlich einfach, Geistertasten mit CSS zu erstellen. Mein Blogartikel basiert auf dem Original-Tutorial der Webseite von Six Revisions.