Ü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

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

Tertiary Link

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.

*5.87

Secondary Tertiary Link
Secondary red Tertiary Link

Textlink – Lorem ipsum dolor sit amet, consetetur sadipscing.

*10.53

Secondary on-dark Tertiary Link

Textlink – Lorem ipsum dolor sit amet, consetetur sadipscing.

*5.30

Primary sw
Secondary sw
Tertiary Link
Primary inverse
Secondary inverse
Tertiary Link

Textlink – Lorem ipsum dolor sit amet, consetetur sadipscing.

*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

Mehr erfahren

Häufig gestellte Fragen

Keine passende Antwort gefunden?

Mehr erfahren