Kauf CSS-Vorlagen

Moderne Kauf-CSS-Templates

Ein durchgestrichener Preis, ein leuchtendes Sale-Badge und ein Button, der verblasst, sobald eine Größe ausverkauft ist – all das stammt aus dem Stylesheet. Kauf-CSS-Templates liefern Ihnen diese Stile vorab für Produktkarten, Preisblöcke und Optionssteuerungen. Sie passen Farbpalette und Abstände an Ihre Marke an, und die visuellen Regeln für jede Kaufsituation sind bereits eingerichtet.

Visuelle Zustände, die Kunden wahrnehmen

Der Preis und der Kaufen-Button haben auf einer Produktkarte das größte Gewicht. Gute Formatierungen geben ihnen durch Schriftstärke, Größe und Freiräume Priorität. Eine kurze Spezifikationszeile oder ein Versandhinweis bleibt kleiner und dezenter, mühelos zu lesen und ebenso leicht zu überspringen. Die folgenden Zustände kommen in den meisten Shops vor, und jeder benötigt ein eigenes Erscheinungsbild:

• ein Angebotspreis direkt neben dem alten Preis, der durchgestrichen und abgeschwächt dargestellt wird;
• eine ausgewählte Option, die sich deutlich von den nicht ausgewählten Größen daneben abhebt;
• eine nicht verfügbare Variante oder ein deaktivierter Button, der auf den ersten Blick als inaktiv erkennbar ist;
• Hover- und Fokus-Stile, die anzeigen, dass ein Bedienelement klickbereit ist, auch für Tastaturbenutzer.

Lagerbestandshinweise und Rabatt-Badges dienen nur der Information. Optionsauswahlen und der Kaufen-Button fordern hingegen zu einem Klick auf. Gutes Styling macht diesen Unterschied sichtbar, sodass ein rotes Badge niemals wie ein klickbares Element wirkt.

Uneinheitliche Beschreibungen, schmale Bildschirme

Grid- und Flexbox-Regeln bestimmen, wie eine Kartenreihe mit Produkten umgeht, deren Beschreibungen unterschiedlich lang sind. Ein langer Produktname kann Preis und Button weiter nach unten schieben als bei der Nachbarkarte, was den Vergleich innerhalb der Reihe erschwert. Solide Templates fixieren beides am unteren Rand jeder Karte, sodass sie in der gesamten Zeile bündig abschließen – unabhängig vom Text darüber. Auf dem Smartphone ordnen sich Karten in weniger Spalten an, und der Button dehnt sich oft über die volle Breite der Karte aus, damit er sich leicht antippen lässt. Preis, Optionen und Button staffeln sich dann genau in der Reihenfolge, in der Käufer sie erfassen.

Wiederverwendbare Klassen für dichte Kartenraster

Da sich dieselben Elemente über Dutzende von Karten hinweg wiederholen, funktionieren die Stile am besten als wiederverwendbare Klassen für die Karte, den Preis und das Sale-Badge. Nicepage Theme Colors wenden ein globales Farbschema auf alle Projektseiten an, wodurch Akzente für Buttons und Preise einheitlich bleiben, während jedes Angebot seine eigene Betonung behält. Ein kompakter Katalog erfordert kompakte Karten und kurze Buttons.

Produkte mit mehreren Auswahlmöglichkeiten erfordern höhere Karten, mehr Abstand zwischen den Auswahlfeldern und einen Button, der unter der letzten Option platziert ist. Die beste Wahl ist meist die Vorlage, deren Stile bereits Ihre komplexeste Karte, Badges und Zustände abdecken.