Symboleinstellungen

Icon-Auswahl

Kernpunkt:
Wählt das Icon aus, das den CTA visuell unterstützt.

Auswirkung:
Ein passendes Icon verbessert Scannbarkeit und Verständnis.

Praxis-Tipp:
Icon soll den Text ergänzen, nicht wiederholen oder widersprechen.

Einstellungen

• Icon-Auswahl
• Icon-Farbe (direkt im Auswahl-UI)
• Strichstärke (bei Line-Icons)
• Responsiv für gerätespezifische Icons

Hover-Icons sind separat möglich. Wenn kein Icon gesetzt ist und der Frame keine Größe hat, wird der Icon-Bereich nicht im DOM ausgegeben.

Icon-Farbe

Kernpunkt:
Passt Sichtbarkeit und Harmonie mit Text/Hintergrund an.

Auswirkung:
Zu starke Icons erzeugen visuelles Rauschen, zu schwache gehen unter.

Praxis-Tipp:
Erst an Textfarbe ausrichten, Akzentfarbe nur gezielt einsetzen.

Einstellungen

• Farbe
• Alpha
• Responsiv

Icon-Größe

Kernpunkt:
Definiert die visuelle Gewichtung des Icons.

Auswirkung:
Unpassende Größe verschiebt die Balance zwischen Text und Icon.

Praxis-Tipp:
Als Startwert ca. 0.9x bis 1.2x der Textgröße wählen.

Einstellungen

• Größenwert
• Einheit (px / em / rem)
• Responsiv

Hover-Größe ist separat einstellbar.

Icon-Position

Kernpunkt:
Positioniert das Icon relativ zum Text.

Auswirkung:
Beeinflusst Lesbarkeit und Klick-Intention.

Praxis-Tipp:
Mit center/center starten, dann in kleinen Schritten X/Y anpassen.

Einstellungen

• X Position (left / center / right + Wert)
• Y Position (top / center / bottom + Wert)
• Einheit (px / % / vw)
• Responsiv

Icon-Frame

Kernpunkt:
Gibt dem Icon einen eigenen Hintergrund-/Rahmenbereich.

Auswirkung:
Erzeugt zusätzliche Informationshierarchie im Knopf.

Praxis-Tipp:
Wenn der Frame stark betont ist, Hauptbutton-Stil etwas zurücknehmen.

Einstellungen

• Größe (einheitlich oder getrennt für Breite/Höhe)
• Farbe (inkl. Alpha/Gradient)
• Rahmen (Position, Stil, Farbe, Stärke)
• Eckenradius
• Frame-Übergang (Duration / Delay / Beschleunigung / Benutzerdefinierter Wert / Zurücksetzen)
• Responsive pro Bereich

Frame-Hover kann unabhängig vom Icon-Hover definiert werden.

Übergang

Kernpunkt:
Stellt Geschwindigkeit und Timing der Hover-Änderung ein.

Auswirkung:
Prägt die wahrgenommene Reaktionsqualität des Knopfs.

Praxis-Tipp:
Starten Sie mit 200-350ms.

Einstellungen

• Dauer (ms)
• Verzögerung (ms)
• Beschleunigung
• Benutzerdefinierter Wert (cubic-bezier)
• Zurücksetzen

Gilt für Icon-Farbe, -Größe und -Position. Frame-Übergang und Icon-Animation sind separat.