Wenn Sie einer Webseite eine Schaltfläche hinzufügen, empfehlen wir Ihnen, CSS zu verwenden, um ihr Design zu erstellen. Die Verwendung von CSS ist die bevorzugte Methode, da sie eine effizientere und organisiertere Methode zum Speichern von Stilcode zur Wiederverwendung in mehr als einem Bereich auf Ihrer Seite oder Website darstellt. Wie Sie im folgenden Beispiel sehen können, können viele Attribute jeden Schaltflächentyp manipulieren.
CSS-Text für die Schaltflächengestaltung
<style type="text/css">
#submit {
background-color: #bbb;
padding: .5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 6px;
color: #fff;
font-family: 'Oswald';
font-size: 20px;
text-decoration: none;
border: none;
}
#submit:hover {
border: none;
background: orange;
box-shadow: 0px 0px 1px #777;
}
</style>
HTML-Code zum Erstellen der Schaltfläche
Nachdem das CSS zu der Seite hinzugefügt wurde, kann dieses CSS mithilfe des id=”submit”-Codes im HTML auf jede Schaltfläche angewendet werden.
<button id="submit">Example Button</button>
Beispiel einer vom CSS erstellten Schaltfläche
Aus dem obigen Beispiel können Sie ersehen, dass die Schaltfläche einen hellgrauen Hintergrund und weißen Text hat, wenn die Maus nicht über der Schaltfläche schwebt. Wenn die Maus über die Schaltfläche schwebt, ändert sich der Hintergrund zu Orange. Außerdem sind die Ecken der Schaltfläche abgerundet statt eckig, wie bei einer Standardformularschaltfläche.
