CSS-Preistabellen-Generator

Grundstruktur

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">9 € <span>/Monat</span></p>
    <p class="tagline">Für Solo-Projekte.</p>
    <ul class="features">
      <li>3 Projekte</li>
      <li>10 GB Speicher</li>
      <li>Community-Support</li>
    </ul>
    <a class="cta" href="#">Kostenlos starten</a>
  </article>

  <article class="plan featured">
    <span class="badge">Am beliebtesten</span>
    <h3>Pro</h3>
    <p class="price">29 € <span>/Monat</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

Responsive Drei-Spalten-Grid

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit + minmax(240px, 1fr) ergibt ein Drei-Spalten-Layout auf dem Desktop und einen einspaltigen Stapel auf Mobilgeräten, ohne dass weitere Konfigurationen erforderlich sind.

Der hervorgehobene Tarif

Visuelle Signale, die Aufmerksamkeit erzeugen:

• Farbiger Rand in der Akzentfarbe der Marke.
• Leicht angehobene Karte über einen negativen margin-top oder translateY(-4px).
• Größerer CTA-Button, meist in der Markenfarbe gefüllt, während die anderen Tarife nur einen Outline-Button bekommen.
• Badge (“Am beliebtesten”, “Bestes Preis-Leistungs-Verhältnis”), absolut positioniert am oberen Kartenrand.
• Höhere Karte, um den Blick zu lenken, auch wenn das den Tarifvergleich erschwert.

Setzen Sie nicht alles gleichzeitig ein, sondern wählen Sie zwei oder drei Mittel. Zu viele Signale ebnen die Hierarchie eher ein, statt sie aufzubauen.

Monatlicher / jährlicher Umschalter

<div class="billing-toggle">
  <button data-active="true">Monatlich</button>
  <button>Jährlich · 20% sparen</button>
</div>

Der Umschalter tauscht die Preiswerte in der Regel per JavaScript aus oder nutzt den :checked-Zustand eines Radio-Buttons. Zeigen Sie den Rabatt in Prozent oder die konkrete Ersparnis in Euro direkt im Label des Umschalters an (etwa “Jährlich zahlen und 20% sparen”): In vielen Preistabellen ist das das überzeugendste einzelne Element.

Styling der Funktionszeilen

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Verwenden Sie ein Häkchen für “enthalten” und ausgegrauten Text oder ein helles Kreuz für “nicht enthalten”. Streichen Sie den Text niemals durch, ohne gleichzeitig den Kontrast zu senken, sonst wirkt die Durchstreichung wie eine Hervorhebung statt wie ein Ausschluss.

Den CTA auffällig halten

Ein CTA pro Tarif, über alle Tarife hinweg visuell konsistent. Unterschiedliche Texte je Tarif (“Kostenlos starten”, “Auf Pro upgraden”, “Vertrieb kontaktieren”) sind völlig in Ordnung und helfen sogar dabei, Nutzer in den passenden Ablauf zu führen.

Die Tabelle überfliegbar machen

Nutzer lesen Preistabellen selten von links nach rechts: Sie überfliegen zuerst die Preise, dann die CTAs und erst danach die Unterschiede bei den Funktionen. Optimieren Sie genau dafür:

1. Tarifname und Preis groß, oben auf der Karte.
2. CTA sichtbar, ohne dass man in der Karte scrollen muss.
3. Funktionsliste darunter. Heben Sie die Unterschiede zwischen den Tarifen hervor, statt identische Funktionen in jeder Spalte zu wiederholen.

Checkliste für Barrierefreiheit

• Jeder Tarif ist ein eigenes <article> mit eigener <h3>.
• Das Badge “Am beliebtesten” ist ein sichtbares Text-Badge und nicht nur eine Farbe (Rücksicht auf farbenblinde Nutzer).
• CTA-Buttons tragen beschreibenden Text (“Pro-Testphase starten”) statt “Hier klicken”.
• Der Umschalter für den Abrechnungszeitraum hat aria-pressed oder die Semantik von Radio-Buttons.
• Preisänderungen beim Umschalten werden über aria-live="polite" angekündigt, wenn sie mit JavaScript implementiert sind.