Wenn Sie einer Webseite eine Schaltfläche hinzufügen, wird empfohlen, dass Sie CSS verwenden, um deren Stil zu erstellen. Die Verwendung von CSS ist die bevorzugte Methode, da es eine effizientere und organisierte Methode zum Speichern von Formatcode für die Wiederverwendung in mehr als einem Bereich Ihrer Seite oder Site darstellt. Wie Sie im folgenden Beispiel sehen können, können viele Attribute verwendet werden, um jeden Schaltflächentyp zu bearbeiten.

CSS-Text für das Button-Styling

#submit {Hintergrundfarbe: #bbb; Polsterung: .5em; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 6px; Farbe: #fff; Schriftfamilie: 'Oswald'; Schriftgröße: 20px; Textdekoration: keine; Grenze: keine; } #submit: hover {border: none; Hintergrund: Orange; Box-Schatten: 0px 0px 1px # 777; }

HTML-Code zum Erstellen der Schaltfläche

Nachdem das CSS der Seite hinzugefügt wurde, kann CSS mit dem Code im HTML auf jede Schaltfläche angewendet werden.

Beispiel-Schaltfläche

Beispiel für eine vom CSS erstellte Schaltfläche

Das obige Beispiel zeigt, dass die Schaltfläche einen hellgrauen Hintergrund und einen weißen Text hat, wenn sich der Mauszeiger nicht über der Schaltfläche befindet. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird der Hintergrund orange. Außerdem sind die Ecken der Schaltfläche abgerundet anstatt quadratisch wie bei einer Standard-Formularschaltfläche.