BUTTONS

Das Button-System hat vier Hauptvarianten: Primär-CTA, Outline-Links, Arrow-Links und gefüllte Secondary-Buttons. Alle kombinierbar mit Größen-Modifiern und der Brand-Farbpalette.

ÜBERBLICK

Klasse	Zweck	Divi CSS-Klasse
`.btn .btn-cta`	Primärer CTA — Gradient-Pill	`btn btn-cta`
`.btn .btn-outline`	Outline-Pill — 6 Farbvarianten	`btn btn-outline`
`.btn .btn-arrow`	Outline + Pfeil-Icon →	`btn btn-outline btn-arrow`
`.btn .btn-solid`	Gefüllter Pill — sekundär	`btn btn-solid`
`.btn-sm` / `.btn-lg`	Größen-Modifier	Kombinierbar, z.B. `btn btn-outline btn-lg`

01 — PRIMÄRE AKTION

btn-cta

Der primäre Call-to-Action. Gradient-Pill mit Brand-Farbverlauf, National Park Bold 24px, weiße Schrift. Pro Seite nur ein CTA dieser Art einsetzen.

Erste Probestunde vereinbaren

Gradient-Farben

#87BBE6 hellblau

#48B593 grün

#27B9D1 cyan

#65C4F0 sky

#BDAED4 lila

<a class="btn btn-cta" href="/probestunde">  Erste Probestunde vereinbaren</a>

02 — NAVIGATION & LINKS

btn-outline & btn-arrow

Outline-Pill mit 3px Border. Der Hauptbaustein für alle weiterführenden Links. Sechs Farbvarianten für unterschiedliche Kontexte und Sektionsfarben. Mit .btn-arrow kombinierbar für Links mit Pfeil-Icon.

Default (weiß) auf dunklem Hintergrund

Standard

Farbvarianten

--navy --teal --hellblau --lime --orange --cyan

Modifier	Farbe	Hex	Divi CSS-Klasse
`--navy`		#222D58	`btn btn-outline btn-outline--navy`
`--teal`		#005A84	`btn btn-outline btn-outline--teal`
`--hellblau`		#87BBE6	`btn btn-outline btn-outline--hellblau`
`--lime`		#CDD600	`btn btn-outline btn-outline--lime`
`--orange`		#FEA410	`btn btn-outline btn-outline--orange`
`--cyan`		#1AADC8	`btn btn-outline btn-outline--cyan`

Mit Pfeil-Icon (btn-arrow)

Ergänzt .btn-outline um einen Font Awesome Pfeil (→). Immer in Kombination mit .btn-outline und einer Farbvariante verwenden.

Mehr erfahren → Mehr erfahren → Mehr erfahren →

<!-- Pfeil-Icon wird automatisch per CSS ::after erzeugt --><a class="btn btn-outline btn-arrow btn-outline--lime" href="/kurse">  Mehr erfahren</a>

03 — SEKUNDÄRE AKTIONEN

btn-solid

Gefüllter Pill-Button für Formular-Submits, Kontakt-Aktionen oder ergänzende Navigation. Der Hintergrund wechselt beim Hover.

Navy (Default) --teal --white

Variante	Hintergrund → Hover	Divi CSS-Klasse
Default	→Navy #222D58 → Teal #005A84	`btn btn-solid`
`--teal`	→Teal #005A84 → Navy #222D58	`btn btn-solid btn-solid--teal`
`--white`	→Weiß → Transparent	`btn btn-solid btn-solid--white`

04 — MODIFIER & ANWENDUNG

Größen & Kombinationen

Größen-Modifier sind mit allen Button-Typen kombinierbar. .btn-lg eignet sich für Standort-Buttons und Hero-Bereiche, .btn-sm für kompakte Navigationen.

Größen-Modifier

btn-sm (15px) Standard (20px) btn-lg (32px)

Modifier	Font-Size	Padding	Einsatz
`.btn-sm`	15px	8px 24px	Navigation, Tags, kompakte Bereiche
(Standard)	20px	12px 36px	Sektions-Links, Arrow-Buttons
`.btn-lg`	32px	16px 44px	Standort-Buttons, Hero-Bereich

Anwendungsbeispiele

Hero CTA

Erste Probestunde vereinbaren

btn btn-cta

Standort-Buttons

Düsseldorf München

btn btn-outline btn-lg

Sektions-Arrow-Links

Programmierung → Projekte → Standorte →

btn btn-outline btn-arrow btn-outline--[farbe]

Sekundäre Aktionen

Kontakt Alle Kurse

btn btn-solid / btn btn-solid btn-solid--teal

05 — STANDORT-AUSWAHL

btn-pill-arrow

Spezial-Variante für Standort- und Auswahl-Pills. Ein Pill-Button mit Text links und einem kleinen ovalen Pfeil-Pill rechts innerhalb desselben Buttons. Wird typischerweise in Navy-Sektionen für Stadt-Auswahl und ähnliche Listen eingesetzt. Mit sanfter Hover-Microanimation: der innere Pfeil-Pill weitet sich und füllt sich mit der Border-Farbe.

Standort-Pills auf Navy-Background

Düsseldorf
Köln
Berlin

btn btn-outline btn-pill-arrow · Hover-over zum Testen der Microanimation

Mit Farbvarianten kombinierbar

Über uns
Projekte
Kurse

btn btn-outline btn-pill-arrow btn-outline--sky · --orange · --lime

Compact-Variante (btn-sm)

Programmiergrundlagen
Spieleprogrammierung
Webentwicklung

btn btn-outline btn-pill-arrow btn-sm · ca. 60 % Skalierung — fuer kompakte Pill-Listen (Themen/Tags) auf hellen Backgrounds

<a class="btn btn-outline btn-pill-arrow" href="/duesseldorf">  Düsseldorf</a><a class="btn btn-outline btn-pill-arrow btn-outline--lime" href="/kurse">  Kurse</a>

Eigenschaften & Microanimation

Eigenschaft	Wert
Schriftgröße	24px (National Park Bold)
Padding	14px 96px 14px 40px
Border (außen)	3px solid (Border-Farbe = Text-Farbe)
Pfeil-Pill (innen)	56×32px Oval, 2px Border, FontAwesome `\f061`
Hover (Button)	Lift translateY(-2px) + Scale 1.02 (Spring-Easing)
Hover-Choreografie	3 synchrone Bewegungen: (1) Parent `padding-right: 96 → 104` (Push-Effekt) (2) Pfeil-Pill `right: 14 → 12` (subtiler Pill-Slide) (3) Pfeil-Icon `padding-left: 0 → 14` (Icon wandert in der Pill nach rechts)
Easing & Tempo	Smooth Soft-Out 550ms — `cubic-bezier(0.22, 1, 0.36, 1)`
Kombinierbar mit	`btn-outline--navy` / `--teal` / `--sky` / `--hellblau` / `--lime` / `--orange` / `--cyan`