Buttons formatieren mit CSS

Mit CSS kannst du in Formularfeldern Buttons formatieren. Dadurch ist es möglich, die sonst eher langweiligen Buttons ansprechender zu gestalten. Außerdem lassen sie sich so besser in das Design deiner Website integrieren.

Wie du mit CSS Buttons formatieren kannst, zeige ich dir anhand des folgenden Beispiels.

 

Code-Beispiel:

<html>
<head>
<style type="text/css">
 
button {
 border: medium solid darkgreen;
 background-color: darkgreen;
 color: white;
}

button:focus {
 border: medium dotted white;
}

button:active {
 border: medium dotted red;
}

</style>
<title>Überschrift der Webseite</title>
</head>
<body>

<button>Abschicken</button>

</body>
</html>

 

Erläuterung:

Mit diesem Beispiel erzeugst du einen dunkelgrünen Button. Wählt man den Button aus, erhält er einen gepunkteten, weißen Rahmen. Ist er gedrückt, ändert sich die Rahmenfarbe zu rot.

Natürlich sind die Farben an dieser Stelle rein willkürlich gewählt. Ich möchte mit diesem Beispiel nur verschiedene Möglichkeiten veranschaulichen. Wie du siehst, lässt sich ein Button sehr vielfältig gestalten. Es gibt darüber hinaus noch viele weitere Möglichkeiten, wie du deine Buttons formatieren kannst. Eine Sammlung der Möglichkeiten findest du auf den Seiten der W3Schools. Hier findest du zahlreiche Beispiele zur Gestaltung von Buttons mit CSS3.

 

Hinweis:

Die Attribute button:focus und button:active funktionieren in ganz alten Versionen vom Internet Explorer nicht.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.