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

Schon mal nicht schlecht, allerdings sieht die Schaltfläche eher wie ein blaues Recht-
eck aus und weniger nach einem Button (Abbildung 3.2).
Abbildung 3.2 Button mit einfachem Stylesheet
3. Schritt: Klickbarkeit
Damit der Nutzer sofort erkennt, dass es sich um ein interaktives Element handelt,
simulieren Sie nun eine Haptik bzw. Tiefe. Dafür versehen Sie den Button mit abge-
rundeten Ecken, einem dezenten Farbverlauf und einem subtilen Schlagschatten
(Abbildung 3.3):
button {
border: 1px solid blue;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.2) 100%);
box-shadow: 0 1px 1px #333;
text-shadow: 0 1px 0 #333;
}
Listing 3.2 Der Button, erweitert um einen Farbverlauf
Abbildung 3.3 Der finale Button