Amazon Style Button CSS3

Sicher hat sich kaum ein Unternehmen mehr Gedanken über Conversion gemacht wie Amazon. Natürlich wird beim Design der gesamten Seite nichts dem Zufall überlassen.

Der Call to Action Button

 

„Call to Action“ – den Nutzer dazu zu bewegen, auf diesen einen kleinen Button zu klicken, der die Bestellung auslöst. Um nichts geht es mehr im Online-Handel. Wer den Käufer zu diesem einen Schritt bewegt wird Umsatz generieren.

Amazon Call to Action Button

Amazon hat hier einen Button geschaffen, dessen Farbstruktur von Nutzern auf der ganzen Welt wiedererkannt wird. Warum also nicht diesen Vorteil für die eigene Seite nutzen und seinen Käufern eine sehr ähnliche Farbstruktur anbieten?

Amazon Button in CSS3

Der nachgebauter Button für eure Webseite oder Online-Shop sieht dann so aus:

Amazon Button in CSS3

Komplett in CSS3 gestalteter Button

Den original Button von Amazon zu verwenden ist nicht nur aufwändig, sondern wohl auch nicht ganz gewünscht. Baut man ihn komplett in CSS3 nach, kann man natürlich minimal andere Farbcodes verwenden. Das Auge des Betrachters wird den Unterschied nicht merken.

CSS-Code:

<style type=“text/css“>
.amazonbutton {

-moz-box-shadow:inset 0px 1px 0px 0px #f9eacf;
-webkit-box-shadow:inset 0px 1px 0px 0px #f9eacf;
box-shadow:inset 0px 1px 0px 0px #f9eacf;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #F6DD9F), color-stop(1, #F0C24D) );
background:-moz-linear-gradient( center top, #F6DD9F 5%, #F0C24D 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#F6DD9F‘, endColorstr=’#F0C24D‘);
background-color:#f5d78a;
-webkit-border-top-left-radius:6px;
-moz-border-radius-topleft:6px;
border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topright:6px;
border-top-right-radius:6px;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-bottom-right-radius:6px;
-webkit-border-bottom-left-radius:6px;
-moz-border-radius-bottomleft:6px;
border-bottom-left-radius:6px;
text-indent:0px;
border:1px solid #cbaa5c;
display:inline-block;
color:#111111;
font-size:13px;
font-weight:normal;
font-style:normal;
height:25px;
line-height:25px;
width:180px;
text-decoration:none;
text-align:center;
}
.amazonbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #F5D589), color-stop(1, #EEBA35) );
background:-moz-linear-gradient( center top, #F5D589 5%, #EEBA35 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#F5D589′, endColorstr=’#EEBA35′);
background-color:#eeba35;
}
.amazonbutton:active {
position:relative;
top:1px;
}
</style>

Viel Erfolg im Online-Shop!

Mein Name ist Stephan Schmied und ich bin seit 2006 Inhaber von Diamondweb. Am liebsten beschäftige ich mich mit Online-Marketing und SEO. Ich betreibe seit 2010 mehrere Onlineshops in absoluten Nischenbereichen.