Buttons formatieren mit CSS

Du kannst mit CSS auch ganz leicht Buttons formatieren, die sich in deinen Formularen befinden. Dadurch kannst du die sonst langweiligen Buttons viel ansprechender gestalten. Sie lassen sich dementsprechend so auch noch besser in das Design deiner Website integrieren.

In diesem Artikel zeige ich dir dabei, wie du mit CSS die Buttons formatieren kannst.

 

Mit CSS Buttons formatieren

Anhand des nachstehenden Snippets kannst du sehen, wie man einen Button formatieren kann. Du kannst das Snippet für deine Website kopieren und dabei natürlich an deine eigenen Bedürfnisse anpassen.

 

Beispiel:

<html>
<head>
<title>Überschrift der Webseite</title>
<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>
</head>
<body>
<input type="submit" id="button" value="Formular absenden" />
</body>
</html>

 

Erklärung:

Mit diesem Beispiel erzeugst du dazu einen dunkelgrünen Button. Wählt man den Button aus, erhält er schließlich einen gepunkteten, weißen Rahmen. Ist er gedrückt, ändert sich die Rahmenfarbe hingegen zu rot. Die folgende Animation verdeutlicht das Ganze dabei etwas:

Anzeigebeispiel, wie man Buttons formatieren kann
So sieht der Button aus dem Beispiel aus. (Bitte klicken, um die Animation abzuspielen)

 

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

Du kannst dir übrigens im Artikel Formulare erstellen in HTML 5 anschauen, welche Formularfelder es gibt. Du kannst dir ebenfalls ansehen, wie man andere Formularfelder farbig gestalten kann, oder wie man Formulare für Smartphones optimiert.

 

Hinweise:

Die Attribute button:focus und button:active funktionieren zwar in ganz alten Versionen vom Internet Explorer nicht, aber das ist inzwischen egal.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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