Übersicht: Links, Buttons und CTA Sections
Kontextlogik
Das CTA-Design basiert auf einer klaren Handlungs- und Prioritätslogik. Ziel ist es, Nutzer gezielt zu führen und auf den ersten Blick verständlich zu machen: Was ist die wichtigste Handlung auf dieser Seite? Welche Aktionen sind ergänzend oder optional?
Primary → Conversion Button
Filled Button | High Intent
Einsatz: Für die wichtigste Aktion auf einer Seite oder in einem Abschnitt.
Gestaltungsprinzipien:
Maximal 1–2 pro Seite → Fokus bleibt klar
Gefüllt → hohe visuelle Präsenz
Größer → klare Hierarchie gegenüber Secondary
Starker Kontrast → sofort erkennbar
Typische Use-Cases: „Demo anfordern“, „FAQ“, „Jetzt Kontakt aufnehmen“ im Hero-Bereiche
secondary
Outline Button | Mid Intent
Einsatz: Für zweitrangige, unterstützende Aktionen, die wichtig sind, aber nicht die Haupt-Conversion.
Gestaltungsprinzipien:
Outline → bewusst weniger dominant
Gleiche Größe untereinander → Gleichrangigkeit
Mehrere nebeneinander möglich → Vergleich & Auswahl erlaubt
Typische Use-Cases: „Referenz ansehen“, „Zum Shop“
Tertiary
Text- Links | Low Intent
Einsatz: Für nicht dominante Aktionen, die Orientierung geben, aber keine direkte Conversion auslösen sollen.
Gestaltungsprinzipien:
Keine Button-Form → bewusst zurückhaltend
Inline oder listenbasiert → integriert in den Content
Geringe visuelle Priorität → untergeordnet zu Primary & Secondary
Mehrfach pro Seite erlaubt → auch in größeren Mengen nutzbar
Klar als Link erkennbar (Farbe, Pfeil, Hover-State)
Typische Use-Cases: Links im Fließtext, „Mehr erfahren“, „Weitere Produkte ansehen“, „Zur Übersicht“, „Details anzeigen“
Farbkontrast
Die verwendeten Farbkontraste entsprechen den WCAG-Vorgaben und wurden auf ihre Barrierefreiheit geprüft. So ist eine gute Lesbarkeit und Zugänglichkeit der Inhalte gewährleistet.
*Wichtige Kriterien zur Prüfung:
Button-Form: Der Rand oder Hintergrund des Buttons benötigt zum Seitenhintergrund einen Kontrast von mindestens 3:1, damit er als interaktiv erkennbar ist.
Text auf Button: Mindestens 4,5:1 (AA-Standard) für normalen Text, 3:1 für großen Text.
Steigern Sie noch heute Ihre Produktivität
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
Häufig gestellte Fragen
Keine passende Antwort gefunden?
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.