HTML und mehr

Button gestalten

Hier wird ein Beispiel gezeigt, wie man einen Button mit CSS gestalten kann.

Dafür braucht man folgenden HTML-Code:

<head>
   ...
   <link rel="stylesheet" href="format.css">
</head>
<div align="center">
 <button>
    Hallo Welt! 
 </button>
</div>

In der Datei format.css werden nun Eigenschaften der Schaltfläche wie z.B. Größe oder Farbe festgelegt:

button {
    margin-top: 50px;
    padding: 20px 10px 20px 10px;
    width: 200px;
    height: 100px;
    background-color: skyblue;
    color: blue;
    font-family: sans-serif; 
    font-size: 20px;
    box-shadow: 5px 5px lightgray; 
    border-radius: 10px;
}

margin-top: Abstand vom oberen Rand der Seite
padding: Abstand des Textes vom Rand des Buttons (oben, rechts, unten, links)
width: Breite
height: Höhe
background-color: Hintergrundfarbe
color: Schriftfarbe
font-family: Schriftart
font-size: Schriftgröße
box-shadow: Größe und Farbe des Schattens
border-radius: Maß für die runden Ecken

Im Screenshot sieht man den Code und das Ergebnis im Browser in zwei Fenstern:


Weiter