CSS: Schaltflächen formatieren

Mit Hilfe von CSS können Sie auch Schaltflächen, also Buttons besser aussehen lassen. Farben, Schriftarten oder sogar einen Rahmen setzen Sie ganz einfach, wie das folgende Beispiel zeigt:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Strict//EN'>

<html>

<head>

<title>Test</title>

<style type='text/css'>

#abschicken {

font-family:Verdana;

color:blue;

background: lightgreen;

border: 2px dotted red;

width: 155px}

</style>

<script type='text/javascript'></script>

</head>

<body>

<form action="POST">

<input type="text" id="eingabe" /><br/>

<input type="submit" id="abschicken"/>

</form></body></html>

Button mit CSS formatiert

Im Browser sehen Sie einen grünen Button mit einem roten, gepunkteten Rahmen und blauer Schrift. Für diese geschmacklich fragwürdige, aber plakative Optik sind die CSS-Eigenschaften color (Farbe), background (Hintergrundfarbe) und border (Rahmen) zuständig. Mit font-family legen Sie die Schriftart fest und mit width die Breite des Buttons.

Achten Sie aber beim Design darauf, dass der Button als solcher erkennbar bleibt. Anderenfalls suchen die Nutzer lange nach der Schaltfläche zum Abschicken eines Formulars.

Ähnliche Beiträge