So wird's gemacht: Gestalten von Schaltflächen

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Es stehen zahlreiche CSS-Eigenschaften und Pseudoklassen zur Verfügung, mit der Sie eine button gestalten können. In diesem Thema werden häufig verwendete Eigenschaften und Pseudoklassen beschrieben. Es enthält darüber hinaus ein Beispiel zur Verwendung der win-backbutton-CSS-Klasse, die von WinJS bereitgestellt wird.

Wissenswertes

Technologien

Voraussetzungen

Schnellstart: Hinzufügen einer Schaltfläche

Nützliche CSS-Eigenschaften

CSS bietet zahlreiche Eigenschaften, mit denen Sie HTML-Elemente gestalten können. Die Liste dieser Eigenschaften ist allerdings lang und kann daher etwas abschreckend wirken. Nachfolgend finden Sie eine kurze Liste mit den CSS-Eigenschaften, die für das Gestalten des button-Steuerelements besonders nützlich sind.

font-family
Gibt die für den Schaltflächentext zu verwendende Schriftart an. In diesem Beispiel wird für font-family die Option "Segoe UI Light" festgelegt.
```
<button id="fontFamilyButton" style="font-family: 'Segoe UI Light'">A button</button>
```
font-size
Gibt die für den Schaltflächentext zu verwendende Schriftgröße an. Sie können verschiedene Formate verwenden, z. B. eine absolute und eine relative Größe, einen absoluten Längenwert oder einen Prozentsatz. Weitere Informationen finden Sie in der Referenz zu font-size.

In diesem Beispiel wird für font-family20 Punkte festgelegt.
```
<button id="fontSizeButton" style="font-family: 'Segoe UI Light'; font-size: 20pt">A button</button>
```

color
Gibt die Farbe des Schaltflächentexts an.

In diesem Beispiel werden mehrere Möglichkeiten zum Festlegen der color-Eigenschaft veranschaulicht.

<button id="pinkButton1" style="color: DeepPink">A button</button>
<button id="pinkButton2" style="color: #FF1493">A button</button>
<button id="pinkButton3" style="color: rgb(255, 20, 147);">A button</button>

background-color
Gibt die Farbe des Schaltflächenoberseite an.

In diesem Beispiel werden mehrere Möglichkeiten zum Festlegen der background-color-Eigenschaft veranschaulicht.

<button id="backgroundButton1" style="background-color: Black">A button</button>
<button id="backgroundButton2" style="background-color: #000000">A button</button>
<button id="backgroundButton3" style="background-color: rgb(0, 0, 0);">A button</button>

border
Gibt die Dicke, den Zeilenstil und die Farbe des Schaltflächenrahmens an.

In diesem Beispiel wird ein durchgängiger Rahmen mit 2 Pixel um die Schaltfläche erstellt.
```
<button id="borderButton" style="border: 2px solid rgb(255, 20, 147);">A button</button>
```

(Beachten Sie, dass diese Liste nicht alle verwendbaren Elemente enthält. Eine vollständige Liste aller CSS-Eigenschaften finden Sie in der Cascading Stylesheets-Referenz.)

Pseudoelemente zum Gestalten von Schaltflächen-Steuerelementen

Das button-Steuerelement besitzt keine Pseudoelemente, die gestaltet werden können.

Pseudoklassen zum Gestalten von Schaltflächen-Steuerelementen

Dieses Steuerelement unterstützt die folgenden Pseudoklassen, die Sie als Selektoren für den Stil des Steuerelements in bestimmten Zuständen verwenden können.

:hover
Wendet Stile auf ein button-Steuerelement an, wenn der Benutzer den Cursor über der button platziert, sie aber noch nicht durch Klicken aktiviert hat.

In diesem Beispiel wird ein Stil für eine button im Zustand "Zeigen" definiert.
```
#hoverButton:hover {
    background-color: deeppink;
}
```
```
<button id="hoverButton">A button</button>
```
:active
Wendet Stile auf ein button-Steuerelement an, wenn es aktiv ist. Die button ist aktiv, solange der Benutzer auf das Steuerelement klickt. Wenn der Benutzer auf das Steuerelement klickt und den Zeiger von der Schaltfläche zieht, ist das Steuerelement aktiv, bis der Zeiger losgelassen wird.

In diesem Beispiel wird die Hintergrundfarbe einer aktiven button geändert.
```
#activeButton:active {
    font-weight: bold;
    border-color: deeppink;
}
```
```
<button id="activeButton">A button</button>
```
:focus
Wendet Stile auf ein button-Steuerelement an, wenn es den Fokus hat. Es gibt verschiedene Möglichkeiten, einer button den Fokus zu verleihen:
- Markieren Sie die button mit einem Zeigegerät.
- Navigieren Sie mit den Tasten TAB und UMSCHALT+TAB zur button.
- Wählen Sie die button mithilfe einer keyboard shortcut aus.
In diesem Beispiel wird die Hintergrundfarbe einer button geändert, wenn die button den Fokus erhält.
```
#focusButton:focus {
   background-color: #ffc;
}
```
```
<button id="focusButton">A button</button>
```
:disabled
Wendet Stile auf ein button-Steuerelement an, wenn es deaktiviert ist. Fügen Sie zum Deaktivieren einer Schaltfläche das disabledAttribut zum HTML-Code hinzu, oder legen Sie für die disabled-Eigenschaft in JavaScript true fest.

In diesem Beispiel wird eine Schaltfläche deaktiviert und ein Stil für sie festgelegt:
```
#disabledButton:disabled {
   border-style: dotted;
}
```
```
<button id="disabledButton" disabled>A button</button>
```

(Weitere Informationen zu den unterschiedlichen Kombinationsmöglichkeiten von Pseudoklassen und anderen Selektoren finden Sie unter Grundlagen zu CSS-Selektoren.)

WinJS-CSS-Klassen

WinJS enthält CSS, mit denen Sie bestimmte Steuerelemente gestalten können. Für das button-Steuerelement steht die win-backbutton-Klasse zur Verfügung. Sie stellt die button als Navigationsschaltfläche dar, mit der Sie zurück zum vorherigen Ort navigieren können.

Hinweis Um diese Klasse verwenden zu können, muss Ihre Seite einen Verweis auf eines der WinJS-Stylesheets enthalten. Weitere Informationen finden Sie unter Stylesheets der Windows-Bibliothek für JavaScript.

In diesem Beispiel wird einer button mit der win-backbutton-Klasse das Aussehen einer Navigationsschaltfläche verliehen.

<button id="backButton" class="win-backbutton"></button>

Wenn Sie die Klasse verwenden, wird eine button wie folgt dargestellt:

Schaltfläche mit der win-backbutton-Klasse