Onlineshops können auch mit liebevollen Details überzeugen. Neben den Standard-Design-Möglichkeiten in Ihrem StoreTex-Shop haben Sie die Option Ihr eigenes Design per CSS zu ergänzen.
Auch wenn Sie sich mit CSS nicht auskennen, können Sie von dieser Funktion profitieren! Diese Button-Styles können Sie einfach kopieren und in Ihren Shop einfügen. Am Ende dieses Beitrags finden Sie eine Anleitung dazu.
Warum Buttons?
Buttons sind eine der wichtigsten Design-Elemente in Ihrem Online-Shop. Denn nur durch Buttons werden Online-Käufe abgeschlossen! Daher sollte unbedingt darauf geachtet werden, dass die Buttons in Ihrem Shop gut lesbar sind und Ihren Kunden auffallen. Zusätzlich wird das Design eines Buttons besonders spannend durch interessante Hover-Effekte.
Button Vorschau
Button-Code (einfach kopieren!)
Button Style 1
<style>
.button{
-webkit-box-shadow: 0px 0px 0px -4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 0px -4px rgba(0,0,0,0.5);
}
.button:hover{
-webkit-box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px -4px rgba(0,0,0,0.5);
background:inherit;
}
</style>
Button Style 2
<style>
.button{
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 3px;
font-weight: bold;
color: #FFF;
background-image: -webkit-linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
background-image: linear-gradient(45deg, #709dff 0%, #b0c9ff 100%);
transition: .4s;
}
.button:hover{
background-image: -webkit-linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
background-image: linear-gradient(45deg, #709dff 50%, #b0c9ff 100%);
}
</style>
Button Style 3:
<style>
.button {
border-radius:5px;
box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 0px 2px inset ;
background:#fff
}
.button:hover{
box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 0px 4px inset ;
}
</style>
Wie nutze ich diese CSS-Code?
Ganz einfach! Kopieren Sie einfach den Code und öffnen Sie in Ihrem Verwaltungstool die Seite "Shopeinstellungen". Dort können Sie den Code im Feld „HTML Header“ einfügen. Speichern nicht vergessen und schon können Sie ihre neuen Buttons im Shop anschauen.
Noch kein StoreTex Shop? Kein Problem Sie können die Buttons und StoreTex kostenlos testen:
