Konzeption und Gestaltungsprinzipien - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 91

zwei Elemente dafür vor: a und button . Den Hyperlink a verwenden Sie vor allem
dann, wenn Sie von einem HTML-Dokument zu einem anderen wechseln oder inner-
halb eines Dokuments zu einem Anker springen wollen. Für eine reine JavaScript-
Interaktion verwenden sie das button -Element:

3

<button>Klick mich!</button>

Abbildung 3.1 Ein HTML-Button auf dem iPhone (links) und unter Android (rechts)

2. Schritt: Größe
Der Button ist nun bereits klickbar, aber noch etwas klein geraten (Abbildung 3.1). Sie
müssen sich schon etwas Mühe geben, um ihn mit dem Finger zu treffen. Gestalten
Sie ihn daher mit CSS, um ihn auf die richtige Größe zu bringen:

button {
border: none;
color: white;
background-color: blue;
font-family: sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 20px;
padding: 5px 10px;
-webkit-appearance: none;
}

Listing 3.1 Die CSS-Definitionen eines Buttons

Dazu legen Sie die Schriftgröße und Zeilenhöhe auf lesbare 12 Pixel fest und geben
mit padding einen großzügigen Innenabstand dazu. Sie werden sicherlich ein wenig
herumprobieren müssen, bis Ihre Schaltfläche eine angenehme Größe besitzt.
Anschließend entfernen Sie die graue Standardformatierung mit der Eigenschaft
-webkit-appearance: none; . Jetzt können Sie Farbe und Formatierung Ihres Buttons
frei vergeben.