Heute möchte ich Euch ein kleines Tool zu dem Erstellen von CSS-Buttons vorstellen. Das Beste daran, für diese Buttons werden keine Grafiken benötigt, sondern sie basieren komplett auf CSS. Nach dem Erstellen könnt Ihr den CSS-Code einfach in Eure CSS-Datei kopieren, auf den Webspace hochladen und fertig.
Zum Beginn wählt Ihr den Hintergrund für den Button aus (dieser kann dem Hintergrund Eurer Webseite entsprechen um so sehen zu können wie der Button wirkt). Dann könnt Ihr mittels der 3 Regler die Größe, die Breite und das Design der Ecken des Buttons einstellen. Nachfolgend findet Ihr dann 7 verschiedene Farbeingaben mit denen Ihr die Farbe des Buttons, Hovereffekte und Texteffekte einstellen könnt. Zum Schluß wählt Ihr dann noch eine passende Schriftfamilie aus und fertig ist der eigene erstellte Button.
Der CSS-Code (in der grauen Box, oder per Klick auf den Button sichtbar) wird in Echtzeit angepasst und braucht nur noch kopiert und in die eigene style.css eingefügt werden. Natürlich könnt Ihr dann noch einige manuelle Änderungen wie Schriftart oder CSS-Klasse anpassen.
Um anschließend den erstellten CSS-Button auch in den HTML-Seiten aufzurufen braucht Ihr nur class=”button” innerhalb des Link-Befehles hinzuzufügen.
Hier geht es zu dem Button-Generator
Viel Spaß damit!
Hast du mal gesehen was der Internet Explorer mit diesem Code anstellt? Der kennt kein border-radius oder shadow usw ….
Für angepasste Websites die auf allen gängigen Browsern, hier natürlich IE, funktionieren sollen ist der Tipp doch überhaupt nicht zu gebrauchen.
admin
