Blog zu den Themen Webentwicklung, technisches Online Marketing und Suchmaschinenoptimierung

Call-to-Action-Button per CSS3

Der Call-to-Action-Button oder das Call-to-Action-Element ist ein Schlüsselfaktor im erfolgreichen Online-Marketing. Experten messen diesem Element eine entscheidende Rolle im Hinblick auf die Konversion-Rate bei. Ganz einfach ausgedrückt bedeutet das: Ist das Call-to-Action-Element gut gestaltet, wird mehr verkauft. Auch im Affiliate-Marketing ist es deshalb wichtig, dem Call-to-Action-Button auffällig und prominent zu gestalten.

Eine andere Sache, die auf jeder guten Landingpage zum Einsatz kommt und auch von alten Hasen der Branche noch durchgehend praktiziert wird, ist das Testen verschiedene Seitenmodule. Oft handelt es sich dabei um einen klassischen A/B-Test, bei dem die CR (Conversion-Rate / Konversion-Rate) miteinander verglichen wird. Selbstverständlich kann man dabei auch den Aufbau des Call-to-Action-Elements variieren um zu testen, welche Variante mehr Aufmerksamkeit erreicht.

Wobei wir auch schon einen guten Übergang geschaffen haben. Das Entwickeln verschiedener Varianten der Landing-Page nimmt natürlich Zeit in Anspruch; und Zeit kann der gemeine Webworker nun mal nie genug haben. Also ist es natürlich von Vorteil seinen Workflow sowohl bei der Entwicklung der Gesamtstruktur als auch bei der Umsetzung einzelner Seitenelemente zu optimieren. Und hier kommt CSS3 ins Spiel…

CSS3 vs Grafik

Die meisten Call-to-Action-Buttons werden auch heute noch mit Hintergrundgrafiken arbeiten. Das liegt vor allem daran, dass ein Call-to-Action-Element, wie oben bereits beschrieben, möglichst auffällig und verlockend sein soll. Ein reiner Textlink wäre da nicht Eyecatcher genug; ein viereckiger div-Container mit einfarbigem Hintergrund würde den potentiellen Kunden wohl eher abschrecken als zur Konversion zu bewegen.

So musste also eine Grafik herhalten, die in Photoshop hübsch zurecht gemacht und anschließend per CSS als Hintergrundbild definiert wurde. Der Nachteil an der Geschichte ist nur, möchte man im Nachhinein etwas ändern, zum Beispiel als Ergebnis eines A/B-Tests, entsteht ein großer Mehraufwand: Schnell mal einen Farbwert ändern? Ohne Photoshop geht da nichts. Außerdem wäre da noch der Nachteil mit den Ladezeiten: Die Grafik an sich dürfte zwar nicht so groß sein, doch der weitere http-Request ist auf einer Landing-Page nicht zu verachten.

Unsere Lösung heißt in diesem Fall mal wieder CSS3. Bereits gestern schrieb ich in einem Artikel, was dank dem großen Browserupdate heute bereits mit CSS3 möglich ist. Einige dieser CSS3-Eigenschaften werden wir auch im heutigen Artikel benutzten. Die Vorteile eines CSS3-Call-to-Action-Buttons liegen auf der Hand: Hat man sich erst einmal in die Materie eingearbeitet, kann man innerhalb einer Minute einen schicken Button bauen. Außerdem wird der Pflegeaufwand drastisch minimiert. Möchte man zum Beispiel die Randfarbe des Buttons ändern oder für einen A/B-Test ein zweites Exemplar kreieren, so ist das innerhalb weniger Sekunden gemacht.

Im Ergebnis möchten wir folgenden Button erreichen:

Der CSS3-Call-to-Action-Button im Detail

Schauen wir uns als erstes den HTML-Code unseren neuen smarten Call-to-Action-Buttons an.

Wieder einmal ziemlich selbsterklärend. Wir verwenden ein übliches a-Element mit einer definierten Zielseite und weisen ihm die Klasse c2a zu.

Nun kommen wir zum komplexeren Teil, dem CSS-Code. Dieser sieht auf dem ersten Blick möglicherweise etwas verwirrend oder komplex aus, was aber hauptsächlich an der Schreibweise des Hintergrund-Verlaufes liegt.

Der Quellcode im Detail:

  • Zeile 2: Damit sich das a-Tag korrekt verhält, wird es von einem Inline-Element zu einem Block-Element.
  • Zeile 6: Arial & Co sind lahm: Wir verwenden die Schriftfamilie Calibri und definieren Alternativschriftarten für Windows XP, Mac OS und Linux.
  • Zeile 8: Einen Unterstrich brauchen wir nicht
  • Zeile 9: Das erste CSS3-Element in unserer Liste, welches für einen leichten Schlagschatten nach rechts unten sorgt.
  • Zeile 10: Und das nächste CSS3-Element. Unser viereckiges Element bekommt runde Ecken mit der Größe von 10 Pixeln.
  • Zeile 11: Wir definieren eine alternative Hintergrundfarbe für ältere Browser
  • Zeile 12-27: Der wohl komplexeste Teil unseres Call-to-Action-Buttons per CSS3. Hiermit realisieren wir einen linearen Farbverlauf mit mehreren Abstufungen. Was auf den ersten Blick recht komplex aussieht, ist eigentlich ein Kinderspiel. Den im Netz finden sich viele gute CSS3-Farbverlauf-Generatoren und mit Copy&Paste kommt man schnell ans Ziel.
  • Zeile 29-46: Hier definieren wir den Mouse-Over- oder auch Hover-Status für unseren Link. Dafür benutze ich die selben Verläufe wie beim vorherigen Punkt, drehe jedoch einfach deren Ursprung um, so dass ein ganz anderes Ergebnis erzielt wird. Dies geschieht in den Zeilen 32, 33 und 40.

Es ist ein bisschen schade, dass die nativen CSS3-Farbverläufe von den Browsern noch nicht unterstützt werden. Deshalb muss man auf diese komplexen Fall-Back-Lösungen zurückgreifen. Doch mit dem Einsatz der verlinkten Online-Generatoren lässt sich auch diese Aufgabe meistern.

Dieser Artikel wurde am 05.04.2011 veröffentlicht

Wer schreibt hier?

Torben Leuschner - Webentwickler

Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!

Wie stehst du dazu?

  1. Ich würde im Moment noch nicht komplett auf CSS3 umsteigen. Wenn ich in den Statistiken von den Webseiten auf die ich Zugriff habe nachsehe, ist das immernoch ein Trauerspiel.

    Durch reines CSS3 sperrt man leider noch sehr viele User aus und das kann ja auch nicht der Sinn beim Online Marketin sein.

    Mit Extrastylesheet für IE durch die allseits beliebten conditional comments um auch diesen Usern eine vorzeigbare Webseite zu bieten ist deine Lösung bzw der Vorschlag allerdings mehr als angenehm und nutzbar.

    Jördis

  2. Schöner Artikel!

    @Jördis

    Für den IE gibt es dann auch noch CSS3Pie womit wunderbar CSS3 auch für den IE umgesetzt werden kann.

    Gruß
    Nikolas

  3. Jördis hat recht, auch wenn es genial und ressourcendsparend ist, würde ich mit der Umstellung noch warten…. Trotzdem Super Artikel… Danke

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.