Newsabo Tipps: Als Dankeschön erhalten Sie die PDF-Reporte „Alles was Sie über die Verlinkung wissen müssen“ und „Wie Sie mit meiner Hilfe Tools finden, mit denen Ihre Website effektiver wird“ gratis!

„Verwenden Sie grafische- oder CSS-Buttons?“

„Online-Marketing Checkliste: Navigation“

Informationen gemäss Stand vom 6.1.2021

Konventionelle grafische Knöpfe (Buttons im Format .gif, .jpg oder .png) als auch CSS-Buttons (Cascading Style Sheets) haben ihre Vor- und Nachteile. Nur wenn man diese kennt, kann man sich für die einen oder anderen klar entscheiden.

Buttons werden als Navigationsschaltflächen verwendet und als Handlungsaufforderungen.

CSS Button Generator

„CSS-Buttons Beispiele“

Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 Button 7

„Vorteile grafischer Buttons“

Jede denkliche Art von Buttons
lassen sich erstellen, die sich optisch ideal in eine Website integrieren lassen.

„Nachteile grafischer Buttons“

Zeitfaktor
Die Erstellung ist relativ aufwendig.
Mehrere Manipulation notwendig
Die Änderung einer Farbe ist aufwendig.
Textmutation
Die Änderung eines Text-Eintrages ist aufwendig.
Ladeintensiv
Diese Buttons sind sehr schnell um den 100-fachen Faktor und mehr grösser als CSS-Buttons. Der Seitenaufbau dauert entsprechend etwas länger.
Doppelter Aufwand
Für den bekannten Mouseover-Effekt braucht es mindestens zwei Grafiken pro Button.
Für den Mouseover-Effekt
(beim Berühren des Buttons verfärbt sich der Button) braucht es einen Javascript-Code.

„Vorteile von CSS-Buttons“

Schnelligkeit
Die Erstellung eines weiteren Buttons ist in Sekunden erledigt.
Farbänderung
Die Änderung einer Farbe ist in Sekunden erledigt.
Textmutation
Die Änderung eines Text-Eintrages ist in Sekunden erledigt.
Schneller Seitenaufbau
Die Grösse eines Buttons ist praktisch nur die Anzahl der Buchstaben sowie einiger wenigen Zeilen CSS-Code.
Mouseover-Effekt
Für den bekannten Mouseover-Effekt sind nur einige Zeichen CSS-Code notwendig.
Für den bekannten Mouseover-Effekt
ist kein Javascript-Code notwendig. Javascript funktioniert nicht auf allen Ausgabegeräten und kann vom Surfer deaktiviert werden.
Es muss keine Grafik heruntergeladen werden,
da der Button nur wenige Zeilen Code gross ist.

„Nachteile von CSS-Buttons“

Alte Browser
haben Probleme, den CSS-Code korrekt zu interpretieren.
So alte Browser sollten Sie aus Sicherheitsgründen eh nicht mehr verwenden!

„Nachtrag“

Kombination von CSS-Code und einer kleinen Grafik
Selbstverständlich lassen sich mit CSS grafische Buttons einsetzen.
Damit kombinieren Sie die Vorteile schöner grafischer Buttons mit den Vorteilen der CSS-Technik.
Content-Management-Systeme
Die CSS-Button lassen sich beim Arbeiten mit CMS verwenden. Der Code muss in die entsprechenden CSS-Dateien übernommen werden.

„Werkzeuge zur Erzeugung von Buttons“

Grafische Buttons können Sie mit jedem Bildbearbeitungsprogramm erstellen. Wer damit seine Mühe hat, für den gibt es praktische Onlinedienste.

Cooltext
Auf dieser Site können Sie Logos erstellen, die Sie als Buttons verwenden können.
de.cooltext.com
Buttonoptimizer (E)
Praktischer Onlinedienst, mit dem Sie sowohl grafische wie CSS-basierte Knöpfe erstellen!
buttonoptimizer.com
CSS Button Generator (E)
Einfach zu bedienender Generator, der CSS-Buttons erstellt.
cssbuttongenerator.com
CSS3 Button (E)
Ein weiterer CSS-Button Generator mit vielen Optionen.
css3button.net
Da Button Factory (E)
Dieser Generator ist einfach zu bedienen. Einfach mit den Optionen spielen, bis es passt!
clickminded.com/button-generator/

Klicken, ähnliche Themen:

Autor: Walter B. Walser, kundennutzen.ch

Walter B. Walser ist Online-Marketing Manager und Redaktor. Er half früher Unternehmern 100% mehr aus Ihrer Website herauszuholen. Er hat KMU in Bezug auf deren Webauftritt beraten und sich auf die Website-Pflege, Website-Optimierung und das Online-Marketing mit Online-Tools spezialisiert.
„Sie dürfen ihn gerne kontaktieren!“

Walser Organisation
https://kundennutzen.ch/