Erstellen ansprechender Schaltflächen mit CSS3

Hinweis  Dieses Thema ist an diesen Blogbeintrag auf ZURB.com angelehnt und wurde auf Windows Internet Explorer 9 zugeschnitten.

Mit Cascading Stylesheets (CSS), Level 3 (CSS3) und Internet Explorer 9 können Sie mit ein wenig Markup visuell ansprechende Schaltflächen erstellen. In diesem Thema wird gezeigt, wie Sie einen einfachen Link in eine vollständig mit Cascading Stylesheets (CSS) formatierte Schaltfläche transformieren können.

Das Thema umfasst die folgenden Abschnitte:

In diesem Thema werden die folgenden CSS3-Features beschrieben:

Darüber hinaus werden in diesem Thema auch die folgenden Features beschrieben, die in Windows Internet Explorer 8 eingeführt wurden:

  • Daten-Uniform Resource Identifier (URIs)
  • Transparente Portable Network Graphics (PNG)

Ausgangspunkt

In diesem Thema verwenden wir dasselbe Beispiel eines Kaffeeröstereiunternehmens wie unter Hinzufügen abgerundeter Ecken mit CSS3. Wir wandeln den auf der braunen horizontalen Leiste mit den Bestellinformationen nach jeder Produktbeschreibung angegebenen Hyperlink "Order Now!" in eine Schaltfläche um. Die Bestellinformationsleiste sieht aktuell wie folgt aus:

Bestellinformationsleiste

Diese Regel wird durch die folgende Klassenauswahl definiert:


.product_orderinfo {
    text-align: right;
    display: block;
    padding: 5px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    background-color: #996633;
}

Zuerst wandeln wir den Hyperlink "Order Now!" in eine einfache rechteckige Schaltfläche um. Damit sich die Schaltfläche gut vom restlichen Design abhebt, verwenden wir dafür die Farbe Blau. Außerdem ändern wir die Leistenhöhe, um eine größere Schaltfläche integrieren zu können. Das CSS für die Standardschaltfläche sieht folgendermaßen aus. (Diese Auswahl ist so deklariert, dass jedes a-Element innerhalb eines Elements mit der Klasse product_orderinfo über die aufgelisteten Deklarationen verfügt. Auf diese Weise wird sichergestellt, dass es nur für die Schaltfläche "Order Now!" auf der Leiste gilt.)


.product_orderinfo a {
    color: white;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none
    font-weight: bold;
    margin: 3px;
    background: #000099;
}

Dadurch wird die Bestellinformationsleiste wie in der folgenden Abbildung dargestellt:

Bestellinformationsleiste mit der neuen blauen Schaltfläche "Order Now!"

Außerdem fügen wir den folgenden Selektor hinzu, damit die Schaltfläche braun angezeigt wird, wenn der Benutzer mit dem Cursor darauf zeigt:


.product_orderinfo a:hover {
    background: #663300;
}

Dadurch wird die Schaltfläche wie folgt dargestellt, wenn Sie mit dem Cursor darauf zeigen:

Bestellinformationsleiste mit einer Schaltfläche, deren Farbe sich in Braun ändert, wenn darauf gezeigt wird

Sie können die überarbeitete Seite anzeigen. Sie können auch die zugehörige CSS-Datei herunterladen.

Und jetzt polieren wir die Schaltfläche mit CSS3 auf!

Hinzufügen abgerundeter Ecken

Zuerst fügen wir der Schaltfläche abgerundete Ecken mit einem Radius von 5 Pixeln hinzu. Hierzu wird der Auswahl die border-radius -Eigenschaft mit dem Wert "5px" hinzugefügt. Außerdem fügen wir mehrere Eigenschaften mit Herstellerpräfix hinzu, um sicherzustellen, dass die abgerundeten Ecken auch in anderen bekannten Browsern entsprechend dargestellt werden. Die folgenden neuen Zeilen werden anschließend hinzugefügt:


    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

Dadurch sieht die Schaltfläche jetzt folgendermaßen aus:

Schaltfläche "Order Now!" mit abgerundeten Ecken

Sie können die überarbeitete Seite anzeigen. Sie können auch die zugehörige CSS-Datei herunterladen.

Hinzufügen von Schlagschatten

Als Nächstes versehen wir die Schaltfläche mit einem Schlagschatten. Hierzu wird dem Selektor die box-shadow-Eigenschaft hinzugefügt. Wie bereits unter Hinzufügen abgerundeter Ecken mit CSS3 erwähnt, müssen der horizontale und vertikale Schattenversatz sowie die Farbe festgelegt werden. Optional können wir auch den Weichzeichnungs- und den Ausbreitungswert festlegen.

Für unsere Beispielschaltfläche legen wir den horizontalen und den vertikalen Versatz jeweils auf 1 Pixel sowie den Weichzeichnungswert auf 3 Pixel fest. Als Farbe legen wir Grau (einen hexadezimalen Wert von #999999) fest. Außerdem fügen wir mehrere Eigenschaften mit Herstellerpräfix hinzu, um sicherzustellen, dass die Schlagschatten auch in anderen bekannten Browsern entsprechend dargestellt werden. In der Auswahl sieht das folgendermaßen aus:


    box-shadow: 1px 1px 3px #999999;
    -moz-box-shadow: 1px 1px 3px #999999;
    -webkit-box-shadow: 1px 1px 3px #999999;

Dadurch wird die Schaltfläche wie folgt angezeigt:

Schaltfläche "Order Now!" mit abgerundeten Ecken und Schlagschatten

Sie können die überarbeitete Seite anzeigen. Sie können auch die zugehörige CSS-Datei herunterladen.

Das sieht schon ganz gut aus, aber der Schatten verschmilzt nicht mit der Hintergrundfarbe. Dadurch entsteht ein dünnes graues Band um den rechten und unteren Rahmen der Schaltfläche. Dies können wir jedoch durch die Verwendung eines anderen neuen Features von Internet Explorer 9 vermeiden: RGBA-Farbwerte. RGB-Farbwerte (red-green-blue) bieten eine Standardmethode zum Festlegen von Farben in Browsern. RGBA-Werte (red-green-blue-alpha) sind identisch, ihnen wurde jedoch ein "Alphakanal" (Transparenz) hinzugefügt.

Der Farbwert für Grau kann durch einen RGBA-Farbwert ersetzt werden, durch den der Schatten schwarz, jedoch mit einer Transparenz von 50 % angezeigt wird. Auf diese Weise vermischt sich der Schatten mit der Hintergrundfarbe. Nach dem Hinzufügen des RGBA-Farbwerts wird dieser Teil des Selektors jetzt folgendermaßen angezeigt:


    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);

Dadurch wird die Schaltfläche wie in der nachstehenden Abbildung angezeigt. Der Schatten vermischt sich jetzt optimal mit der Hintergrundfarbe:

Schaltfläche "Order Now!" mit abgerundeten Ecken und angeglichenem Schlagschatten

Sie können die überarbeitete Seite anzeigen, indem Sie hier klicken. Sie können auch die zugehörige CSS-Datei herunterladen.

Hinzufügen einer transparenten Farbverlaufsüberlagerung

Abschließend fügen wir noch eine transparente Farbverlaufsüberlagerung hinzu, um der Oberfläche der Schaltfläche mehr Struktur zu verleihen. Ohne eine wesentliche Einschränkung der Bandbreite wird dies durch einen transparenten vertikalen Farbverlauf (Breite 1 Pixel) über die gesamte Länge der Schaltfläche erreicht. Sie können den Farbverlauf im von Ihnen bevorzugten Bildbearbeitungsprogramm erstellen oder einfach den hier verknüpften Farbverlauf verwenden: gradient.png

Um den Farbverlaufs auf die Schaltfläche anzuwenden, müssen Sie dem Farbverlaufspfad einen Verweis als url()-Wert für die background-Eigenschaft hinzufügen und eine horizontale Wiederholung mit einem repeat-xrepeat-x-Wert festlegen:


    background: #000099 url("gradient.png") repeat-x;

Dadurch wird die Schaltfläche wie folgt angezeigt:

Schaltfläche "Order Now!" mit abgerundeten Ecken, Schlagschatten und Farbverlaufsüberlagerung

Damit derselbe Effekt auch erzielt wird, wenn der Benutzer mit dem Cursor auf die Schaltfläche zeigt, muss der folgende Selektor auf ähnliche Weise aktualisiert werden:


.product_orderinfo a:hover {
    background: #663300 url("gradient.png") repeat-x;
}

Darstellung der Schaltfläche "Order Now!" mit abgerundeten Ecken, Schlagschatten und Farbverlaufsüberlagerung, wenn mit dem Cursor darauf gezeigt wird

Sie können die überarbeitete Seite anzeigen. Sie können auch die zugehörige CSS-Datei herunterladen.

Hinzufügen einer transparenten Farbverlaufsüberlagerung als Daten-URI

Daten-URIs wurden erstmals in Internet Explorer 8 unterstützt und ermöglichen das direkte Einbetten von Datenelementen in Webseiten. Häufig werden Daten-URIs zum Einbetten von kleinen Bildern in das Layout einer Webseite verwendet. Hierzu können wir ganz einfach auf die transparente Farbverlaufsüberlagerung aus dem vorherigen Abschnitt zurückgreifen.

Der erste Schritt besteht darin, das PNG-Bild in einen Daten-URI zu konvertieren. Es sind viele webbasierte Lösungen und Desktopanwendungen verfügbar, die Sie hierbei unterstützen. Bei den meisten dieser Lösungen müssen Sie die Bilddatei in die Anwendung laden oder darin angeben, und dann wird der Daten-URI bereitgestellt. Nachstehend ist der Daten-URI für die Datei "gradient.png" aufgeführt:


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=

Damit Sie den Daten-URI für die Schaltfläche verwenden können, müssen Sie einfach nur den Namen der Datei ("gradient.png") im background-Eigenschaftswert durch den Daten-URI ersetzen. Die background-Eigenschaft sieht jetzt wie folgt aus:


    background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;

Wir können auch den Selektor, mit dem das Verhalten der Schaltfläche definiert wird (also wie die Schaltfläche dargestellt wird, wenn der Benutzer mit dem Cursor darauf zeigt) wie folgt aktualisieren:


.product_orderinfo a:hover {
    background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}


Die Schaltfläche wird wie in der nachstehenden Abbildung angezeigt, die der vorherigen Abbildung entspricht. Und das Beste ist, dass für die Schaltfläche nicht einmal eine separate Bilddatei auf den Webserver hochgeladen werden muss:

Schaltfläche "Order Now!" mit abgerundeten Ecken, Schlagschatten und einer Daten-URI-basierten Farbverlaufsüberlagerung

Wenn Sie mit dem Cursor darauf zeigen, wird die Schaltfläche folgendermaßen dargestellt:

Darstellung der Schaltfläche "Order Now!" mit abgerundeten Ecken, Schlagschatten und einer Daten-URI-basierten Farbverlaufsüberlagerung, wenn mit dem Cursor darauf gezeigt wird

Sie können die überarbeitete Seite anzeigen. Sie können auch die zugehörige CSS-Datei herunterladen.

Zusammenfassung

Jetzt wissen Sie, wie Sie einem einfachen Hyperlink abgerundete Ecken, transparente Schlagschatten und eine transparente Farbverlaufsüberlagerung hinzufügen und so in eine ansprechende Schaltfläche umwandeln. Nachdem Sie alle in den vorherigen Abschnitten beschriebenen Änderungen vorgenommen haben, werden die endgültigen Selektoren im Stylesheet folgendermaßen angezeigt:


.product_orderinfo a {
    color: white;
    background: #000099 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin: 3px;
}

.product_orderinfo a:hover {
    background: #663300 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAJklEQVQIW2P4//+/NxMDA8N/JgYGhn+oLDQu7Vk/GP4zMXDQx3IA0To1YWcEwtQAAAAASUVORK5CYII=") repeat-x;
}

Verwandte Themen

Hinzufügen abgerundeter Ecken mit CSS3
Hinzufügen von Schlagschatten mit CSS3
CSS3

 

 

Anzeigen:
© 2015 Microsoft