Formatierung einer Schaltfläche (Button) mit CSS3

Die aktuellen Versionen der Browser Firefox, Opera, Safari und Google Chrome bieten die Möglichkeit, viele Dinge mit Hilfe von CSS3 umzusetzen anstatt Grafiken verwenden zu müssen. Dazu gehören abgerundete Ecken, Schatteneffekte und Farbverläufe. Der Internet Explorer einschließlich Version 8 bietet diese Möglichkeiten gar nicht oder nur eingeschränkt. Sehr schade. Ich kann also allen Besuchern nur empfehlen: umsteigen auf einen modernen Browser :-)

Zunächst der HTML-Code und die Ausgabe ohne Formatierung, einmal ein Textlink und dann ein Formular-Button:

<p><a href="#">Klick mich an!</a></p>

<form action=""><input name="submit" id="submit" type="submit" value="Schick mich weg!" title="Schick mich weg!" /></form>

1. Ohne Formatierung

Klick mich an!


2. Einfache Formatierung

Klick mich an!

CSS – class „but“

.but { background: #ddd; border: 1px solid #ccc; color: #000; font-weight: 700; padding: 0.5em 1em; text-align: center; width: 10em; }


3. Ecken abrunden

Klick mich an!

CSS – class „rund“:

.rund { -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; }


4. Schatten für Text und Schalter hinzufügen

Klick mich an!

CSS – class „schatten“:

.schatten { text-shadow: #fff 0 1px 0; -webkit-box-shadow: 1px 1px 5px #ddd; -moz-box-shadow: 1px 1px 5px #ddd; box-shadow: 1px 1px 5px #ddd; }


5. Einen Farbverlauf hinzufügen

Klick mich an!

CSS – class „verlauf“:

.verlauf {
background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background: -moz-linear-gradient(top, #dddddd, #bbbbbb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#bbbbbb'); /* IE6 & IE7 */
-ms-filter: "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#bbbbbb')"; /* IE8 */ }


Die class kann man nach Bedarf einfügen/kombinieren, natürlich auch unter einer class zusammenfassen, ganz nach Wunsch. Beispiel:

<p class="but rund schatten verlauf"><a href="#">Klick mich an!</a></p>

<form action=""><input class="but rund schatten verlauf" name="submit4" id="submit4" type="submit" value="Schick mich weg!" title="Schick mich weg!" /></form>

…und für alle, die mit dem Internet Explorer surfen … so sollte es aussehen:

Coole Online-Tools findet man unter Cool Tools and Toys for Web Developers (unter der „CSS3 Sandbox“).

Ergänzung:

Opera in der Version 10.5x scheint bei Formular-Button ein Problem zu haben, wenn ein border-radius angegeben wird, aber kein border vorhanden ist:
Annoying Opera CSS3 bug – INPUT border-radius

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (No Ratings Yet)
Loading...

Weitere Artikel aus dieser Kategorie


3 Kommentare zu diesem Artikel bisher »

Kommentare zu »Formatierung einer Schaltfläche (Button) mit CSS3«

  1. […] posted here: Formatierung einer Schaltfläche (Button) mit CSS3 | Webdesign … AKPC_IDS += "9961,";Popularity: unranked [?] Share and […]

  2. Also tolle Erklärungen! Jetzt ist es mir schon alles klar. Danke

  3. Piz d’Emmat Dadaint 2927 m…

    Ich lese häufig Ihr Blog und finde es immer sehr interessant. Dachte, es sei an der Zeit, ich lasse Sie das mal wissen, machen sie weiter mit ihrer großartigen Arbeit…

Kommentieren

Erlaubtes XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>