Eigene CSS3 Buttons erstellen

Wer auf seiner Website Button-Elemente verwendet, hat diese bisher meist mit Images realisiert, wenn die Buttons auch ansprechend aussehen sollten. Mit dem Übergang von CSS2 nach CSS3 ergeben sich neue Möglichkeiten bei der Darstellung. In diesem Beitrag auf Complett-Service.de erfährst du, wie du selbst CSS3 Buttons ohne Button Generator realisieren kannst.

Button Generator erstellt CSS3 Buttons.

Button Generator erstellt CSS3 Buttons.- © Deutsche Fotothek-Wikimedia Vorlage

Bevor es die Möglichkeit gab, CSS3 Buttons zu erstellen, wurden die verschiedenen Zustände von Schaltflächen, das sind „normal“, „mouse over“ oder „active“ (Button gedrückt), durch Austausch der entsprechenden Images realisiert. Diese Technik ist auch nach wie vor sicherer. Denn weil es sich bei den meisten CSS3-Neuerungen bisher nur um Empfehlungen des W3C handelt, werden diese neuen Features noch nicht von allen Browsern unterstützt. Wenn du noch mit deinem Lieblingsbrowser aus dem letzten Jahrhundert arbeitest, solltest du deshalb über eine Aktualisierung nachdenken. Sonst könnten diesem Tutorial Probleme auftauchen, da im Augenblick nur die neuesten Browserversionen CSS3 und somit auch CSS3 Buttons weitgehend unterstützen.
Die Beispiele in dieser Anleitung für die Entwicklung eigener Schaltflächen mit CSS3 wurden auf einem Windows-Rechner mit dem kostenlosen Editor „Notepad++“ erstellt.

Was soll der eigene CSS3 Button können?

Vor dem Beginn einer Entwicklung, ganz gleich ob es sich um CSS3 Buttons oder responsive Webdesign handelt, ist es sinnvoll, die Rahmenbedingungen und Ziele festzuhalten. Was ist wünschenswert und was sollte der eigene CSS3 Button alles beherrschen? Hier meine Kriterien:

  • Der Button sollte drei Status darstellen können: normal, mouse over und active.
  • Der CSS3 Button sollte abgerundete Ecken haben.
  • Die Schaltfläche sollte einen Farbverlauf haben, damit die 3D-Effekte für die Zustände „normal“ und „gedrückt“ darstellen kann.

Wer seine Vorstellungskraft für die eigenen CSS3 Buttons nicht überstrapazieren möchte, sollte sich für das Feature „Farbverlauf“ eines visuelles Tools bedienen, das auch gleich die entsprechenden Code Snippets liefert. Ein sehr schönes Tool ist der „Ultimate CSS Gradient Generator“ von ColorZilla. Mit diesem Tool kannst du online den Farbverlauf deiner CSS3 Buttons bestimmen, und es wird sofort der Code für unterschiedlichste Browser generiert.

Weitere Tools habe ich in meiner Linkliste unter Webtipps abgelegt. Im Internet findest du auch Seiten mit CSS3 Button-Generatoren, die du alternativ verwenden kannst. Dann bist du allerdings abhängig von den Möglichkeiten, die der jeweilige Button Generator bietet. Und außerdem wäre dann dieses Tutorial schon so gut wie zu Ende;)

Die dritte Alternative – oder auch Ergänzung – zu diesem Tutorial sind die Buchempfehlungen am Ende dieses Turorials. Dort findest du ausführlichere Darstellungen zum Thema und angrenzenden Bereichen der Webentwicklung.

Entwicklung eines eigenen CSS3 Buttons – erste Schritte

Als erstes wird eine simple HTML-Datei angelegt, die den CSS3 Button als ein Div-Element bereitstellen soll. Mein Code-Snippet für den Button sieht wie folgt aus:

<div id=“download-button“>Download ZIP</div>

Wie du siehst, ist der eigene Button dafür gedacht, z. B. auf einer Website einen schnellen Download zu ermöglichen, wie er auch in diesem Tutorial weiter unten angeboten wird.
Innerhalb des Head-Bereichs lege ich den Link auf eine externe CSS-Datei an, deren Bearbeitung die Hauptaufgabe dieses Tutorials ist.

Wenn du z. B. den „Ultimate CSS Gradient Generator“ verwendest, wird für die CSS3 Buttons, wie schon erwähnt, Code für die verschiedenen Browser erzeugt. Ich werde aber der Übersichtlichkeit halber nur Codeteile verwenden, die sich auf den Browser Firefox beziehen. Außerdem werde ich mich hier nur auf die Styles beziehen, die für die CSS3 Buttons wichtig sind. In den Beispieldateien, die du herunterladen kannst, sind aber noch die Styles für andere Browser enthalten.

Eigener CSS3 Button mit „Gradient Effekt“

Listing 1 (Styles für die Beschriftung des Buttons):
  1. #beschriftung{
  2. font-family: ‚Arial‘;
  3. font-size: 22px;
  4. position: absolute;
  5. width:180px;
  6. top:10px;
  7. text-align: center;
  8. z-index: 11;
  9. text-shadow: 1px 1px 0px #ccc;
  10. }

Für die Beschriftung des CSS3 Buttons verwende ich einen Textschatten „text-shadow“. Hierbei sind die ersten beiden Werte für die Schattenverschiebung nach links und unten (bei positiven Werten) zuständig. Der dritte Wert gibt die Unschärfe an und der vierte die Farbe des Schattens. Die restlichen Styles für die CSS3 Buttons sollten klar sein. Durch diese Angabe eines Textschattens erreiche ich eine plastischere Darstellung der Schrift, sie wird dadurch reliefartig.

Listing 2 Button-Styles:
  1. #download-button{
  2. position: absolute;
  3. width: 180px;
  4. height: 50px;
  5. top: 30px;
  6. left: 30 px
  7. border: 1px solid #393;
  8. background: -moz-linear-gradient(top, rgba(195,255,178,1) 0%, rgba(82,214,25,1) 28%, rgba(2,175,0,1) 100%);
  9. }

Hier ist Zeile 8 interessant, in welcher der Verlauf festgelegt wird. Die Background-Farbe des CSS3 Buttons hat einen Verlauf, der oben bei „0“ beginnt und bei 28 % einen Stoppwert hat. Der Dritte Wert ist dann bei 100 % erreicht. Der Farbwert „rgba“ enthält neben den 3 Farben, die im obigen Beispiel verschiedene Grünwerte darstellen, noch einen Transparenzwert „a“. Dieser Transparenzwert kann für die CSS3 Buttons zwischen 0 und 1 liegen.

Beispiel Button

Eigener CSS3 Button mit „Mouse Over Effekt“

Wird die Maus über CSS3 Buttons bewegt, soll sich dies optisch äußern. Ich werde dafür die Pseudoklasse „hover“ benutzen. Früher unterstützten Browser diese Art Änderung eines Styles nur bei den a-Tags. Die jetzige Generation der Browser unterstützt auch andere HTML-Elemente. Und da ein Div-Tag meinen CSS3 Button darstellt, werde ich „hover“ auf das Element mit der id „download-button“ anwenden.

Listing 3 „:hover“:
  1. #download-button:hover{
  2. position: absolute;
  3. width: 180px;
  4. height: 50px;
  5. top: 129px;
  6. left: 129px;
  7. border: 1px solid #393;
  8. border-radius:8px;
  9. background: rgb(195,255,178); /* Old browsers */
  10. background: -moz-linear-gradient(top, rgba(195,255,178,1) 0%, rgba(82,214,25,1) 28%, rgba(2,175,0,1) 100%); /* FF3.6+ */
  11. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(195,255,178,1)), color-stop(28%,rgba(82,214,25,1)), color-stop(100%,rgba(2,175,0,1))); /* Chrome,Safari4+ */
  12. background: -webkit-linear-gradient(top, rgba(195,255,178,1) 0%,rgba(82,214,25,1) 28%,rgba(2,175,0,1) 100%); /* Chrome10+,Safari5.1+ */
  13. background: -o-linear-gradient(top, rgba(195,255,178,1) 0%,rgba(82,214,25,1) 28%,rgba(2,175,0,1) 100%); /* Opera 11.10+ */
  14. background: -ms-linear-gradient(top, rgba(195,255,178,1) 0%,rgba(82,214,25,1) 28%,rgba(2,175,0,1) 100%); /* IE10+ */
  15. background: linear-gradient(to bottom, rgba(195,255,178,1) 0%,rgba(82,214,25,1) 28%,rgba(2,175,0,1) 100%); /* W3C */
  16. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‚#c3ffb2‘, endColorstr=‚#02af00‘,GradientType=0 ); /* IE6-9 */
  17. box-shadow: 2px 2px 4px #666;
  18. color:#BC0000;
  19. }

Fahre ich jetzt mit meiner Maus über den CSS3 Button, sieht es so aus, als würde der Button sich zur Maus hin bewegen, und die Textfarbe wird geändert. Wie du an dem obigen Code-Snippet erkennen kannst, habe ich dem Button einen Schatten hinzugefügt. Dies erweckt bei CSS3 Buttons den Eindruck, sie würden sich vom Untergrund abheben. Um diesen Eindruck noch realistischer zu gestalten, habe ich auch die Position des CSS3 Buttons entsprechend geändert, und zwar um 2 Pixel nach oben und nach links. Als Demo habe ich beide Versionen eingefügt. So kannst du diese vergleichen.

Mouse Over-Effekt ohne Positionsänderung

Beispiel Button

Mouse Over-Effekt mit Positionsänderung

Beispiel Button

Eigene CSS3 Buttons mit „Mouse Down Effekt“

Mit einer weiteren Pseudoklasse („active“), die ich auf den Button anwende, kann ich den Zustand des gedrückten CSS3 Buttons simulieren. In diesem Fall möchte ich den Button als eingedrückt darstellen. Dies bedeutet, dass der Schatten wieder verschwindet, die Position zurückgesetzt wird und der Button den umgekehrten Farbverlauf erhält. Übrigens musst du den Wert für den Box-Schatten überschreiben, nicht einfach nur entfernen, CSS3 sei Dank!

Listing 4 „:active“:
  1. #download-button:active{
  2. top: 0px;
  3. left: 0px;
  4. border: 1px solid #393;
  5. background: rgb(42,91,0); /* Old browsers */
  6. background: -moz-linear-gradient(top, rgba(42,91,0,1) 0%, rgba(42,91,0,1) 1%, rgba(5,170,5,1) 9%, rgba(23,183,5,1) 87%, rgba(65,196,62,1) 94%, rgba(5,170,5,1) 100%, rgba(140,224,114,1) 100%); /* FF3.6+ */
  7. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(42,91,0,1)), color-stop(1%,rgba(42,91,0,1)), color-stop(9%,rgba(5,170,5,1)), color-stop(87%,rgba(23,183,5,1)), color-stop(94%,rgba(65,196,62,1)), color-stop(100%,rgba(5,170,5,1)), color-stop(100%,rgba(140,224,114,1))); /* Chrome,Safari4+ */
  8. background: -webkit-linear-gradient(top, rgba(42,91,0,1) 0%,rgba(42,91,0,1) 1%,rgba(5,170,5,1) 9%,rgba(23,183,5,1) 87%,rgba(65,196,62,1) 94%,rgba(5,170,5,1) 100%,rgba(140,224,114,1) 100%); /* Chrome10+,Safari5.1+ */
  9. background: -o-linear-gradient(top, rgba(42,91,0,1) 0%,rgba(42,91,0,1) 1%,rgba(5,170,5,1) 9%,rgba(23,183,5,1) 87%,rgba(65,196,62,1) 94%,rgba(5,170,5,1) 100%,rgba(140,224,114,1) 100%); /* Opera 11.10+ */
  10. background: -ms-linear-gradient(top, rgba(42,91,0,1) 0%,rgba(42,91,0,1) 1%,rgba(5,170,5,1) 9%,rgba(23,183,5,1) 87%,rgba(65,196,62,1) 94%,rgba(5,170,5,1) 100%,rgba(140,224,114,1) 100%); /* IE10+ */
  11. background: linear-gradient(to bottom, rgba(42,91,0,1) 0%,rgba(42,91,0,1) 1%,rgba(5,170,5,1) 9%,rgba(23,183,5,1) 87%,rgba(65,196,62,1) 94%,rgba(5,170,5,1) 100%,rgba(140,224,114,1) 100%); /* W3C */
  12. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‚#2a5b00‘, endColorstr=‚#8ce072‘,GradientType=0 ); /* IE6-9 */
  13. box-shadow: 0 0 0 #6f6;
  14. box-shadow:inset 4px 4px 6px #666;
  15. color:#BC0000;
  16. }

Wie du erkennen kannst, habe ich den Farbverlauf leicht abgeändert. Mit dieser Änderung lassen sich bei CSS3 Buttons Vertiefungen besser darstellen. Außerdem habe ich einen weiteren CSS3 Style in Zeile 14 des Code-Teils hinzugefügt, der einen innenliegenden Schatten darstellt. Dadurch entsteht auch auf der linken Seite des CSS3 Buttons den Anschein einer Vertiefung. Also, mir gefällt er für‘s Erste, und ich denke, ich werde ihn in diesem und in den weiteren Tutorials benutzen.

Download ZIP

 

Literaturempfehlungen zum Thema CSS3

Modernes Webdesign mit CSS3
Modernes Webdesign mit CSS ist ein aktuelles und umfassendes Buch zum Thema CSS3, das auch auf responsisve Design eingeht. Schritt für Schritt wird anschaulich anhand von Beispielen erklärt, wie man mit CSS3 moderne Websites erstellen kann. Tipps und Tricks aus der Praxis runden dieses empfehlenswerte Werk aus der Reihe Galileo Design ab.

Jetzt lerne ich CSS3 - Modernes Webdesign verstehen und anwenden
Wer wenig Zeit mitbringt, dafür aber Grundkenntnisse in HTML, ist mit Jetzt lerne ich CSS3 – Modernes Webdesign verstehen und anwenden gut beraten. Querleser finden die wichtigsten Hinweise und Tipps optisch herausgehoben als Blickfang am Seitenrand.

Schreibe einen Kommentar

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