CSS3-Tricks: Semi-transparente Buttons erstellen

Wie Sie ganz einfach halbdurchsichtige CSS3-Buttons erstellen können

semi-transparent-buttons

In meinen heutigen Artikel lernen Sie die Erstellung von halbdurchsichtigen (semi-transparenten) CSS3 Buttons kennen, welche ganz besonders auf Webseiten mit fotografischen Hintergrundbildern zur Wirkung kommen.

Webseiten mit ganzseitigen Bildern bzw. Fotos als Background-Image sind derzeit gerade sehr stark im Kommen und ein richtiger Trend. Genau hier kann man die durchsichtigen bzw. halbtransparenten Buttons ganz toll einsetzen.

Neben diesem Webdesign-Trend gibt es auch die sogenannten „Ghost Buttons“ („Geister-Buttons“), dessen Aufbau und Erstellung Sie im Tutorial How to Create CSS Ghost Buttons auf Sixrevision.com ansehen und studieren können.

Ghost-Buttons-Demo

So wirken semi-transparente Buttons auf Webseiten

Durch die Durchsichtigkeit der Buttons kommt das als Hintergrund angelegte ganzseitige Bild ganz toll zur Geltung und verleiht der Webseiten einen ansprechenden visuellen Effekt, ganz ähnlich wie bei den „Ghost Buttons“.

Die klassische Button-Form verleiht den semi-transparenten Buttons aber zusätzlich ein starkes und visuelles Signal und sagt damit, dass es anklickbar ist!

Semi Transparent Button

Erstellung eines semi-transparenten Buttons (BASIS)

Die coolen und toll wirkenden Buttons sind eigentlich ganz leicht zu erstellen. Alles was Sie dazu brauchen, sind eine Zeile HTML und einige Zeilen CSS.

HTML

Der einfache Befehl betrifft hier nur ein einziges HTML-Element. In diesem Fall ist ein Hyperlink-Element notwendig.

<a class="semi-transparent-button" href="#">Button</a>

CSS

Die CSS-Anweisung, welche für den semi-transparenten Effekt der Buttons verantwortlich ist, ist der CSS-Eigenschaft background. Diesem Hintergrund wird ein RGBA-Farbwert zugeordnet, sodass Sie die Deckkraft entsprechend steuern können. Die Farbe ist in diesem Fall für den Hintergrund weiß mit 50% Deckkraft.

 
.semi-transparent-button {
  display: block;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px;
  width: 80%;
  max-width: 200px;
  background: #fff; /* fallback color for old browsers */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  transition: all 0.3s ease-out;
}

Wichtig:

Abgerundete Ecken werden durch die border-radius-Eigenschaft erreicht

text-align wird verwendet, um die Beschriftung der Schaltfläche (die ein gemeinsames Merkmal von UI-Buttons sind) zu zentrieren

max-width wird auf 200px gesetzt, so dass die Buttons auf größeren Bildschirmen nicht zu groß werden

Eine einfacher Animationseffekt mit der CSS-Eigenschaft transition kommt zum Einsatz, wenn der Benutzer mit dem Button interagiert;

Zusätzlich wird für die Buttons ein Fallback mit einem einfarbigen Hintergrund eingesetzt für Browser, die die Farbwerte RGBA () nicht darstellen können (z.B. Internet Explorer 8 und kleiner).

background: #fff; /* fallback color for old browsers */

Durch den Einsatz der 3 Pseudo-Klassen hover: focus und: active kann der Benutzer die unterschiedlichen Zustände des halbdurchsichtigen Buttons entsprechend verändern, indem er mit der Maus über der Schaltfläche schwebt, diese anklickt und damit aktiviert und mit der Maus wieder wegfährt.

.semi-transparent-button:hover,
.semi-transparent-button:focus,
.semi-transparent-button:active {
  background: #fff;
  color: #000;
  transition: all 0.5s ease-in;
}

Erstellung eines semi-transparenten Buttons (Blauer Hintergrund)

Eine Technik zur Erhöhung des visuellen Gewichtes des semi-transparenten Buttons ist der Einsatz einer lebendigeren Hintergrundfarbe. Weiß ist im Basis-Button eine sehr neutrale Farbe, sodass hier durch die Verwendung einer halbtransparenten blauen Farbe eine interessante Alternative angeboten wird. Der Code für einen halbdurchlässigen blauen Hintergrund ist:

background: #1e348e; /* fallback color for old browsers */
background: rgba(30, 52, 142, 0.5);

Erstellung eines semi-transparenten Buttons (weißer Rahmen)

Eine weitere Technik zur Erhöhung der Sichtbarkeit der halbdurchsichtigen Schaltflächen ist der Einsatz von einem ganz dünnen Rahmen. Dies geschieht ganz einfach durch die CSS-
Eigenschaft border.

border: 1px solid #fff;

Fertige Demo-Buttons ansehen

Wichtig!
Ich möchte Sie darauf aufmerksam machen, dass dieses Beispiel nur in den neuesten und aktuellsten Browsern funktioniert. In den Mobilversionen (Smartphone, Tablets) werden die Buttons möglicherweise fehlerhaft bis gar nicht dargestellt!
Tweet about this on TwitterShare on Google+1Share on Facebook0Email this to someone

Schreib einen Kommentar

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