Verwenden Sie grafische- oder CSS-Buttons?

Online-Marketing: Die Navigation

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

Informationen gemäss Stand vom 8.3.2023

Buttons werden als Naviga­tions­schaltflächen verwendet und als Handlungs­aufforderungen.

Inhaltsver­zeichnis: Website-But­ons

• Vorteile grafischer Buttons
• Nachteile grafischer Buttons
• Vorteile von CSS-Buttons
• Nachteile von CSS-Buttons
• Nachtrag
• Werkzeuge zur Erzeugung von Buttons

Vorteile grafischer But­tons

• Jede denkliche Art von But­tons
  lassen sich erstellen, die sich optisch ideal in eine Website integrieren lassen.

Nachteile grafischer Buttons

• Zeitfaktor
  Die Erstellung ist relativ auf­wendig.
• Mehrere Manipulationen not­wen­dig
  Die Änderung einer Farbe ist aufwendig.
• Textmutation
  Die Änderung eines Text-Ein­tra­ges ist aufwendig.
• Ladeintensiv
  Diese Buttons sind sehr schnell um den 100-fachen Faktor und mehr grösser als CSS-Buttons. Der Sei­ten­auf­bau dauert ent­sprechend etwas länger.
• Doppelter Aufwand
  Für den bekannten Mouse­over-Effekt braucht es min­des­tens 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-But­tons

• Schnelligkeit
  Die Erstellung eines weiteren Buttons ist in Sekunden erle­digt.
• Farbänderung
  Die Änderung einer Farbe ist in Sekunden erledigt.
• Textmutation
  Die Änderung eines Text-Ein­trages ist in Sekunden erle­digt.
• 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 Mouse­over-Effekt sind nur einige Zeichen CSS-Code not­wendig.
• Für den bekannten Mouseover-Effekt
  ist kein JavaScript-Code notwendig. JavaScript funktioniert nicht auf allen Ausgabe­gerä­ten und kann vom Sur­fer deakti­viert werden.
• Es muss keine Grafik heruntergeladen werden,
  da der Button nur wenige Zeilen Code gross ist.

Nachteile von CSS-But­tons

• Alte Browser
  haben Probleme, den CSS-Code korrekt zu inter­pre­tieren.
  So alte Browser sollten Sie aus Sicher­heits­gründen 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-Sys­teme
  Die CSS-Buttons lassen sich beim Arbeiten mit CMS ver­wenden. Der Code muss in die ent­sprechenden CSS-Dateien über­nommen wer­den.

Werkzeuge zur Er­zeu­gung von But­tons

Grafische Buttons können Sie mit jedem Bild­be­arbeitungs­pro­gramm 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 erstel­len!
  buttonoptimizer.com
• CSS Button Generator (E)
  Einfach zu bedienender Generator, der CSS-Buttons erstellt.
  cssbuttongenerator.com
• CSS3 Button (E)
  Ein weiterer CSS-Button Gene­ra­tor 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/
  

Autor: Walter B. Walser, kundennutzen.ch