Buttons formatieren

Scripting-Tipps - CSS


Mit CSS lassen sich die standardmäßig eher langweiligen Buttons in Formularen ansprechender gestalten.

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 wird ein dunkelgrüner Button erzeugt. Wird der Button ausgewählt, erhält er einen gepunkteten, weißen Rahmen. Wird der Button gedrückt, ändert sich die Rahmenfarbe zu rot.

Hinweis:
Die Attribute button:focus und button:active funktionieren (noch) nicht im Internet Explorer.





Weitere Artikel: