Buttons mit CSS3 erstellen: Mach mir das Leben leichter!

15 Feb
15. Februar 2011
HTML

HTML

Die Begriffe HTML und CSS3 sind aktuell in aller Munde. Die Diskussion ob es schon sinnvoll ist, diese Techniken eizusetzen oder nicht möchte ich gar nicht führen. Denn bei jeder neuen Technik bricht sie los. Haben schon alle Benutzer die notwendigen Browser, etc. um alles zu sehen? Wird es überhaubt ein Standard? Wann wird es verschwinden? All diese Fragen tauchen immer und immer wieder auf. Daher enthalte ich mich der weiteren Meinung zu dieser Diskussion.

Aber wer einfach mehr herausholen will, wird sich schon damit beschäftigen müssen. Für tiefergehende Grundlagen empfehle ich euch das Webkompetenz-Wiki oder auch das HTML 5 Handbuch – Der neue Münz (Schleichwerbung in eigener Sache). Aber um der Überschrift gerecht zu werden müsst ihr weiterlesen.

Und heute gibt es nicht ganz den gewohnten Code. Es ist diesesmal ein Code-Generator um euch das Leben zu erleichtern. Ich dachte mir, dass man Buttons nicht immer nur mit den netten Hintergrundgrafiken oder auch Sprites mit CSS erstellen kann. Nein das ganze geht auch mit reinem CSS3 und sieht auch noch gut aus. Ich mache mir aber nicht die Mühe die 1.000 Erklärung dazu zu schreiben. Eine sehr gute findest Du bei Red Team Design [EN] zum Nachlesen. Aber was mich interessiert, ist wie ich schnell zum passenden CSS-Code kommen.

css3Button

css3Button

Natürlich können wir es mit Hand codieren, aber mit einem guten Generator ist das flux erledigt. Und genau dieser ist bei css3button.net [EN] zu finden. Entweder Du stellst dir deinen Knopf mit den Einstellungen selbst zusammen und holst Dir dann den Code. Oder Du klickst auf ShowCase und surfst Durch hunderte fertige Buttons um Dir den Code zu holen. Danach einfach ins StyleSheet eingefügt und schon hast auch Du die neuen Knöpfe auf deiner WebSite.

Tags: , , , , ,