Ansprechbare Buttons mit visueller Reaktion und CSS3

Die HTML5- und CSS3-Unterstützung in den aktuellen Browsern und Surfclients dieser Welt ist sicherlich noch mangelhaft. Manchmal darf man jedoch Applikationen entwickeln, bei denen es auf eine flächendeckende Unterstützung nicht so sehr ankommt. Das gilt z. B. für manche Intranets oder Applikationen mit beschränkten Zugangsberechtigungen.Ich habe in der letzten Zeit einige, sogenannte Backoffices gebaut (Messeclients etc.) und es hat mir enorm viel Spass gemacht, dabei neuere Elemente und CSS-Angaben verwenden zu können, weil ich mir über die korrekte Darstellung sicher sein konnte.Wenn man z. B. Desktop-ähnliche Webapplikationen für Prism entwickelt, darf man auf den vollen Schwung von Properties zugreifen, die derzeit vom Mozilla-Projekt unterstützt werden. (Naja, zumindest fast) Mit wenigen Zeilen CSS hat man so schnell einen feinen, ansprechenden Button gebastelt, der bei Interaktion mit der Maus brav ein reaktives Verhalten zeigt. Hier erstmal das HTML:

<!DOCTYPE html
    PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>XHTML 1.0 Transitional</title>
</head>
<body>
<div id="wrapper">
    <form>
        <button type="submit" class="save">Save</button>
        <button type="submit" class="cancel">Cancel</button>
    </form>
</div>
</body>
</html>

Das Formular ist nicht funktional und dient nur der Demonstration. Kommen wir lieber zum CSS. Zunächst geben wir dem #wrapper einen Hintergrund:

#wrapper {
    width: 400px;
    height: 200px;
    background-color: #ddd;
    padding: 50px;
}

Dann geben wir den Buttons mit ein wenig CSS3 ein bisschen Schick:

button {
    background-color: #ddd;
    background-image: -moz-linear-gradient(bottom center, #ccc, #ddd);
    border: 1px solid #999;
    border-top-color: #eee;
    border-left-color: #eee;
    color: #333;
    font-weight: bold;
    text-shadow: 1px 1px 1px #fff;
    padding: 3px 8px;
    cursor: pointer;
    -moz-border-radius: 5px;
    -moz-box-shadow: 2px 2px 3px #ccc;
}

Das erste Resultat sieht dann so aus:

Über das cursor: pointer lässt sich bekanntlich streiten. Ich mag es, weil es ein visueller Indikator dafür ist, dass hier eine Aktion erfolgen kann.

Visuelle Reaktion

Als nächste beschäftigen wir uns mit der visuellen Rückmeldung der Buttons, den verschieden states beim Überfahren und beim Klick. Zunächst die Pseudoklassen :hover und :focus. Der Abbrechen-Button erhält dabei ein eigenes Benehmen, die Schriftfarbe soll sich beim :hover ändern.

button:hover, button:focus {
    -moz-box-shadow: 2px 2px 3px #aaa;
}
button.cancel:hover, button.cancel:focus {
    color: #f60; /* Fast orange */
}

Der :hover-Status hebt den Button visuell an (über die shadow-Property):

Der Save-Button wird hervorgehoben.

Der Cancel-Button erhält noch einen Farbwechsel.

Der tatsächliche Klick nutzt dann die :active-Pseudoklasse, um die Aktion farblich zu unterstreichen. Der Save-Button bekommt eine grüne, der Cancel-Button eine rote Schrift:

button.save:active {
    color: green;
}
button.cancel:active {
    color: #c00;
}

Der :active-State für Save.

Der :active-State für Cancel.

Fertig! Wir haben keine Grafiken verwendet, die einen weiteren HTTP-Request notwendig machen würden. Findige Webdesigner können sicherlich die paar Zeilen für die Webkit-und anderen Browser-Abkömmlinge hinzufügen. Mit ein bisschen Bastelei hat man die Buttons sicherlich auch in älteren Browsern, die ggf. noch unterstützt werden müssen, ergänzt. Obwohl das reaktive Verhalten der Buttons für Menschen mit Wahrnehmungsschwächen nicht optimal ist, kann diese Lösung eingebaut werden. Ohne CSS und state-changes hat man immer noch zwei klassische Buttons.

Dieser Beitrag wurde unter Design, HTML & CSS abgelegt und mit , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>