Amazon „Kaufen-Button“ mit CSS nachbauen – Nützliche Tipps für deine Nischenseite

WERBUNG

Wer eine Nischenseite betreibt, der setzt häufig auf das Partnerprogramm vom Marktführer Amazon. Der wohl größte Online Shop der Welt bietet gigantische Möglichkeiten für Affiliates, nur die Einbindung ist nicht immer so einfach.

Amazon selbst stellt zum Großteil nur sehr veraltete Werbemittel zur Verfügung (und seit neuestem ein einfaches Plugin), was Schade ist und anders geht, wie Konkurrenten immer wieder beweisen und wie Amazon selbst ebenfalls zeigt, zum Beispiel mit kontextbasierter Werbung bei AdSense.

Für Affiliates bleiben aber oft nur die Links und entsprechende WordPress Plugins oder Affiliate Themes, die dann via CSS angepasst und verbessert werden müssen, denn kaum eines integriert sich einfach so in den eigenen Blog.

Wichtig beim Thema Nischenseite ist außerdem der richtige Button. Die falsche Farbe oder die falsche Form, schon werden die digitalen Knöpfchen spürbar weniger geklickt und die Conversion Rate sinkt rapide.

Warum also nicht einfach den Button nutzen, den Amazon selbst verwendet? Denn wenn jemand weiß, wie ein Button aussehen muss, damit Nutzer über ihn kaufen, dann doch wohl die entsprechende Abteilung von Amazon. Bauen wir ihn also einfach nach.

Ein bisschen CSS und ein Bild

Schon mehrmals hatte ich mir vorgenommen den Button von Amazon nachzubauen. Sonderlich schwer ist das mit CSS nicht, es braucht nur etwas Zeit.

Zum einen, damit der Button auch wirklich sehr ähnlich aussieht. Zum anderen, damit alles möglichst optimiert und verkleinert wird, um nicht unnötig Ressourcen zu verschwenden.

Für den Button braucht ihr CSS-Code. Ihr braucht das Bild, welches bei Amazon selbst ein Einkaufswagen ist, und all das solltet ihr anschließend noch möglichst geschickt zusammenführen.

Fangen wir also an mit unserer eigenen Version vom „Amazon kaufen“-Button.

Das Icon für den Button vorbereiten

Theoretisch könnt ihr Font Awesome gleich direkt für das Icon verwenden. Ich mag diese Lösung weniger, da Font Awesome bei vielen überflüssig ist und gerade Anfänger dazu neigen die Icon Font einzubinden, obwohl sie nur zwei Symbole benötigen. Stattdessen nutzen wir einen Converter, der aus jedem beliebigen Font Awesome Icon eine PNG-Datei macht.

Mit fa2png.io erstellen wir also unser Bild und da mir das Amazon Logo in diesem Fall besser gefällt als der Button, nutze ich auch genau dieses dafür.

Als Hintergrund wähle ich #444, als Farbe für das Icon einfach weiß. Eben so wie das Symbol, welches auch sonst auf dem Amazon Button zu sehen ist. Jetzt habt ihr euer Bild und was fehlt ist der Button. Um den kümmern wir uns nun ausführlicher.

Nischenseiten-Aufbau E-Book

Amazon Button mit CSS nachbauen

Das große Problem beim Thema Button ist nicht der Verlauf, sondern das Bild innerhalb des Verlaufes zu realisieren. Der Verlauf selbst gilt nämlich als »Background-Image« und so ist im normalen Gedankengang gar kein Platz für ein weiteres. Aus dem Bauch heraus würden viele den Code also soschreiben.

background: linear-gradient(top, #000 0%,#fff 100%) url(bild.png) no-repeat; 

Funktioniert aber leider nicht. Also denken wir um, drehen das ganze herum und suchen dann noch die richtigen Farben für Amazon heraus. Das schöne helle, recht unauffällige Gelb soll es sein. Dazu das eben erstellte Bild, welches ihr im Bildbearbeitungsprogramm eurer Wahl auch noch weiter anpassen, abrunden, oder bearbeiten könnt. Ganz wie es euch gefällt und ganz so, wie ihr es am Ende in eurem Button sehen wollt.

Ohne euch weiter mit Details zu langweiligen, sieht der fertige CSS-Code für den Button dann so aus. Eine Komplettlösung, die alles enthält was benötigt wird.

.amzn
{
    font: 13px/44px sans-serif;
    font-family: sans-serif;
    text-decoration:none;
    text-align: center;

    display: inline-block;

    width: 180px;
    height: 42px;
    padding: 7px 20px 8px 50px;

    color: #222;
    border: 1px solid #c5a65a;
    border-radius: 4px;
    background: url(http://i.imgur.com/juarELs.png) no-repeat 3px 3px, -webkit-gradient( linear, left top, left bottom, color-stop(.05, #f6dd9f), color-stop(1, #f0c24d) );
}

Die URL innerhalb des Codes ist das von mir gewählte und bereits angepasste Bild, welches auf die oben erklärte Art und Weise erstellt wurde. Diesen Link müsst ihr also entsprechend austauschen, oder aber ihr speichert und nutzt das Bild in der von mir gewählten Variante. Das bleibt alles euch überlassen, ich wollte im Beispiel nur gerne ein fertiges Ergebnis präsentieren und keine Lücken mit irgendwelchen Platzhaltern lassen.

Für den Link, der zum Button werden soll, einfach die entsprechende CSS-Klasse »amzn« verwenden und schon habt ihr den Button direkt in eurem eigenen Design. Ganz einfach und so minimal wie möglich.

In den Einkaufswagen

Kleine Anpassungen vornehmen

Je nachdem wie eure Nischenseite aussieht, kann es natürlich sein, dass ihr noch kleinere Änderungen am vornehmen müsst. Zum Beispiel die Schriftgröße und Schriftart, oder auch die allgemeine Größe des Buttons. Das sollte aber jeder Anfänger beherrschen und die entsprechenden Werte im Code einfach selbst anpassen.

Viel Erfolg mit eurer Nischenseite und dem neuen Button. Wenn ihr selbst noch ein paar Tipps für bessere Knöpfchen und Conversion Rates habt, Empfehlungen und Hinweise, oder ihr einfach nur danke sagen wollt, ist Platz dafür in den Kommentaren.

Amazon Affiliate WordPress Plugin - Produktboxen + Bestseller-Listen für Blogs und Nischenseiten
WERBUNG 

WERBUNG

14 Gedanken zu „Amazon „Kaufen-Button“ mit CSS nachbauen – Nützliche Tipps für deine Nischenseite“

  1. Hallo David,
    danke für’s teilen deines Codes. Der ist noch kompakter als meine Version. Was mir da noch fehlt ist ein „hover“-Effekt. (Das sind aber auch nur wenige Zeilen mehr. Da setze ich meist nur den Rahmen und den „opacity“-Wert.)
    Oft ist es aber gar nicht nötig, den Button „per Hand“ selbst anzupassen. Bei Amazon-PlugIns wie AAWP ist der Buttons schon „von Haus aus“ passend gestaltet oder kann bequem im Backend angepasst werden.
    Wenn ich aber einen sog. CTA-Button (abseits eines PlugIns oder einer Liste) verwenden möchte, sieht der Button oft ganz anders aus als „das Original“ von Amazon.
    Wie du aber schon unter http://www.blogprojekt.de/2016/12/20/blog-design/teste-es-4-dinge-die-ihr-im-ab-test-perfektionieren-koennt/ geschrieben hast, ist das ein Punkt, der einfach getestet werden sollte.

    Schönen Gruß

  2. Hat jemand Erfahrungen ob so ein Button tatsächlich besser convertiert? Schließlich ist der button ideal für die Amazon-Website, die ja besondere Farben usw. verwendet. Wenn man jetzt aber auf einer schlichten Seite, mit völlig anderer Farbwahl so einen Button setzt ist das doch unpassend und vielleicht abschreckend… Oder ist der Button ein Vertrauensmerkmal für den Nutzer?

  3. Hallo David,
    danke für den Code-Schnipsel…
    Da das von dir verwendete „AmazonIcon“-png (ist so um die 690 Bytes groß, nicht?) bei größerer Darstellung sehr pixelig wird, habe ich mir aus dem fa-svg-Font das passende Zeichen (fa270) kopiert, per Adobe Illustrator gedreht und als vollwertiges SVG (hat jetzt 3,3 KB) abgespeichert. Anschließend habe ich mit den Farben gespielt, bis es passte. Was mir nun noch fehlt, ist eine gewisse „Responsiveness“ des gesamten Buttons – habe dazu noch ein bissel weiter gebastelt, aber ganz zufrieden bin ich noch nicht. Trotzdem ist es live gegangen und ich konnte damit so ein Button des Ultimate Shortcode WP PlugIns ablösen, das m.E. das Laden der Startseite spürbar ausgebremst hat (Stichwort „gefühlte Ladegeschwindigkeit“). Ja – weniger ist oft mehr, und wenn ich ohne das eine oder andere PlugIn (u.a. auch die zahlreichen Amazon-PlugIns!) auskommen kann, bin ich glücklich(er)… 🙂
    Btw – ich lese gerade eifrig und mit viel Interesse dein „WP Performance“-Buch…
    Viele Grüße
    Christian

    1. Natürlich kannst du auch eine SVG erstellen, oder das Icon einfach größer exportieren. Wenn die Größe aber feststeht (bzw. die größte Größe), bin ich immer gegen SVG, da optimierte PNGs einfach kleiner sind. Am Ende bleibt es ja nicht bei dem einen Icon, sondern es kommen noch viele andere Bilder und Grafiken hinzu, sodass auch Kilobytes den Unterschied in Sachen Ladezeit machen können.

      Du könntest dafür alles mit Prozentwerten lösen, dann wäre der Button komplett Responsive und würde sich entsprechend anpassen. Mir wäre jetzt aber nicht klar, wozu das gut sein sollte. Du kennst die Größen ja meist. Desktop, Tablet, Mobil. Wozu also ein Button, der skaliert?!

      Das freut mich. Dann hoffe ich mal es gefällt dir und du hinterlässt bei Amazon 5 Sterne für mich 🙂 Würde mich freuen, denn da steckt viel Herzblut und Leidenschaft für das Thema drin.

      1. Grundsätzlich hast du recht, man könnte auch größere PNGs nehmen – aber aus meiner Sicht noch 2 Dinge, die dafür sprechen, lieber SVG zu nehmen (auf die Idee mit den SVG hat mich übrigens indirekt Bernhard Kau aus unserer Berliner WordPress Community mit seinem Blogbeitrag gebracht: https://kau-boys.com/1836/wordpress/slides-from-my-session-better-themes-with-scalable-vector-graphics-svg-at-wordcamp-nuremberg-2016):
        1) Ich weiß nicht, wie groß (d.h., wie viele Pixel) das Icon beim Betrachter einnimmt, denn im Destopbereich werden die Monitore immer hochauflösender (ich habe hier auch einen mit 4K stehen) und/oder ältere Besucher (so wie ich :-)) nutzen die Zoomfunktion per ctrl&+, um Texte besser lesen zu können – da wird ein PNG schnell mal pixelig.
        2) Ich kann den Farbwert per stroke und fill im Editor leicht ändern und brauche dafür kein Grafikprogram 😉 …
        Natürlich will ich so wenige Bilddateien wie möglich (und so klein wie nötig) übertragen, deshalb verzichte ich in diesem Fall auch auf komplette SVG-Fonts, sondern extrahiere halt nur die Bilder/Icons, die ich tatsächlich einsetzen möchte – nur eben als SVG.
        Der Button soll skalieren, da je nach @media Einstellung des Themes die Seiten unterschiedlich umbrechen und dann mal weniger, mal mehr Breite zur Verfügung steht (d.h. wenn die Sitebar bei geringerer Auflösung bzw. weniger Breite plötzlich unter dem content-Bereich steht). Danke für den Vorschlag, aber das mit den Prozentwerten hatte ich initial schon probiert, aber es sah noch nicht optimal aus. Mittlerweile habe ich zusätzlich min-width und max-width gesetzt – jetzt gefällt mir der Button schon recht gut :-)…
        Und, ja: Wenn ich mit dem Buch durch bin, gebe ich dafür eine gute Bewertung, das ist sicher.
        Ich hoffe, meine Überlegungen und Ergänzungen tragen zum Gesamtthema positiv bei, so dass auch andere davon profitieren…

        Viele Grüße
        Christian

        1. Wenn du die Größte nicht kennst, sind Vektorgrafiken immer besser, das ist klar. Wie du schon sagst, die skalieren und sind relativ simpel änderbar.

          PS: Ich schreibe seit längerem an einem Guide zur SVG-Optimierung. Da du mir interessiert scheinst… halt mal die Augen auf FastWP offen, denn der Artikel sollte bald fertig sein 🙂

          1. Super – danke für deinen Tipp, habe ich gerade eben auch auf FastWP entdeckt 🙂 …
            Was ich außerdem noch schick finde, ist die Verwendung von svg als Filter – mir ist nur noch nicht ganz klar, wie ich das vollständig in den Code bringe – muss zu genau diesem Thema dann wohl noch etwas googlen…

  4. Hallo Baran, hallo Mark,

    ich glaube, man bewegt sich bei einem „Nachbau“, der ein identisches Layout aufweist (zum Beispiel mit dem Amazon-Logo), in einem rechtlich fraglichen Bereich. Zweifelsfrei sind Logo und Warenzeichen geschützt und das ist auch gut so.
    Jedoch ist aus meiner Sicht – die kein rechtskundiges Fundament hat – anzumerken, dass bei der Verwendung von Farben sicherlich keine Bedenken bestehen.
    Vielleicht kann Peer hier einmal aufgrund seiner guten Kontakte zum Amazon-Partnerprogramm fundierte und verifizierte Informationen geben.
    Oder man wendet sich einfach an das Partnerprogramm und stimmt ein solches Vorgehen mit den sachkundigen Bearbeitern dort ab.

    1. Theoretisch ist jeder „Nachbau“ nicht erlaubt, weil auch Designs unter das Urheberrecht fallen. Allerdings sind die Buttons von Amazon generisch und das Logo wird sowieso von tausend Affiliate Plugins verwendet, warum sollte es hier also nicht erlaubt sein? Zumal Amazon doch keine Maskierung möchte, das Logo also für noch mehr Transparenz sorgt. Kann mir kaum vorstellen, dass sie etwas dagegen haben. Wenn doch, ist es in meinen Augen hochgradig lächerlich.

    1. Am besten nutzt man ein Plugin wie Simple CSS und baut dort den CSS Code ein. Dann kann du im Text deines Artikels einem Link die Klasse „amzn“ geben und der sollte das so aussehen.

Schreibe einen Kommentar

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