Buttons formatieren mit CSS

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

 

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.

 

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.