Button - grafische Schaltflächen im Webdesign

Webdesign ohne Bilder oder Fotos ist zwar möglich aber etwas grafische Gestaltung tut fast jeder Webseite gut. Button als Schaltflächen für grafische Navigationen bieten sich da geradezu an.

Das Alt-Atribut des img-tags sollte mit einem treffenden Text ausgefüllt werden um den Suchmaschinen das inhaltliche Einordnen der Webseiten zu erleichtern, weil Bildlinks für Suchmaschinen schlechter zu erkennen sind als Textlinks. Diese Texte werden von readern auch für blinde Menschen vorgelesen.

Die hier bereit gestellten Button-Sets eigenen sich neben dem herkömmlichen Einbinden in Webseiten auch für das Anlegen von Rollover-Navigationen, die mit Hilfe von javascript realisiert werden können.

Wollen Sie eine Rollover-Navigation aus diesen Button-Sets anlegen, ist die einfachste Lösung die Button in einem Bildbearbeitungsprogramm zu beschriften. Da sie bei einem Rollover nicht einfach als Hintergrundbilder in die Webseiten geladen werden können, sondern für den Bildwechsel normal in einen img-tag geladen werden müssen, könnte eine darüber liegende css-Beschriftung bestenfalls durch verschachtelte Tabellen oder übereinanderliegende Layer bewerkstelligt werden, was nicht sehr elegant ist und zu unterschiedlichen Darstellungen in den verschiedenen Browsern führen kann.

Die Barrierefreiheit des Webdesign geht bei der Tabellenvariante ebenso wie bei einer Rollover-Navigation mit Javascript verloren. Aus diesem Grund vermeiden wir solche Navigationen, möchten hier aber diese Variante nicht ganz außer Acht lassen. Im privaten Bereich und für offline-Präsentation ist dies eine durchaus interessante Gestaltungsmöglichkeit.

Button zum selbst beschriften

Die nachfolgenden Button können Sie ganz individuell entweder in einem Bildbearbeitungsprogramm oder per css-style-Angaben beschriften und so in das Webdesign Ihrer eigenen Homepage optimal einpassen. Aus jeweils zwei zusammengehörigen Button können Rollover-Navigationen gefertigt werden. Sie können aber auch nur einen Button aus dem jeweiligen Set als statische Variante zum Einsatz bringen.
Die "drück mich"-Variante der Herzen kann verwendet werden, wenn kein Bildbearbeitungsprogramm zur Hand ist. Sinnvollerweise sollten dann aber die alt-Attribute der img-tags für den Navigationstext verwendet werden.

Button-Sets für Roll-over-Navigationen

Die folgenden grafischen Button stehen zur kostenlosen Nutzung für das Gestalten privater Webseiten, ohne Adsense-Einnahmen und ohne Partnerprogrammen, zur Verfügung. Komerzielle Nutzung ist jedoch auf Anfrage möglich. Bitte die Hinweise im Impressum beachten.

Button für Haupt- und Subnavigationen

Button für Hauptnavigation

Button für Subnavigation

Die Beschriftung der folgenden, schräg angeordneten Herz-Button, gestaltet sich etwas schwieriger. Eine Möglichkeit besteht darin, die Schaltflächen in ein Bildbearbeitungsprogramm zu laden, welches transparente gif's speichern kann und dort zu beschriften. Kann das Programm die Transparenz nicht erhalten empfiehlt es sich die Hintergrundfarbe der Website als Hintergrund zu wählen, da die Herzen beim speichern mit diesem Hintergrund versehen werden und dann trotzdem in die Seite geladen werden können, ohne dass das Rechteck des Hintergrundes sichtbar wird. Eine Beschriftung per css ist nur bedingt möglich, da sich der Text per css nicht schräg anordnen lässt. Ein Anwendungsbeispiel gibt es unter den Webdesign-Templates in der Galerie.

Die mit Thema... und Seite... bereits beschriftenten Button können wieder als Alternative verwendet werden, wenn Sie keine Möglichkeit haben die Button anderweitig zu beschriften. Tragen Sie dann aber auf alle Fälle das Thema in das alt-Attribut des img-Tags ein.

Button - Set Herzen schräg normal

Button - Set Herzen schräg aktiv