# Button

Mit dem **Button**-Element führst du Spielende per Tap zur **nächsten Szene** – klassisch für „Weiter“, Auswahl­optionen, Abzweigungen oder Bonus-Aktionen. Oben im Dialog siehst du eine **Live-Vorschau** deiner aktuellen Einstellungen.

---

## [![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/b4dgrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/b4dgrafik.png)Felder

**Text**  
Beschriftung des Buttons (z. B. „Weiter“, „Zur Aufgabe“, „Norden wählen“).  
Tipp: Kurze Verben + Nutzen („Öffnen“, „Lösen starten“).

**Zielszene**  
Die Szene, die beim Tippen **geöffnet** wird.

- Üblich ist, hier **immer** eine Szene zu wählen.
- Wenn du bewusst **ohne Ziel** speicherst, verhält sich der Button wie ein „stummer“ UI-Button und löst keine Navigation aus (nur sinnvoll für Speziallogik).

**Hintergrundfarbe**  
Hex-Wert für die Buttonfläche, z. B. `#68bfdd` (Brand Color).

**Textfarbe**  
Hex-Wert für die Beschriftung, z. B. `#ffffff`.

---

## [![grafik.png](https://docs.scenario.app/uploads/images/gallery/2025-09/scaled-1680-/sEGgrafik.png)](https://docs.scenario.app/uploads/images/gallery/2025-09/sEGgrafik.png)Verhalten in der App

- **Tap** auf den Button öffnet **sofort** die gewählte **Zielszene**.
- Mehrere Buttons in einer Szene werden automatisch **untereinander** (mobilfreundlich) gerendert; die **Reihenfolge** entspricht der Reihenfolge im Editor.
- Buttons reagieren direkt; es ist **kein** GPS/Scan nötig (anders als bei Wegpunkten/QR/NFC).
- Buttons werden mit einem Sicherheitsabstand unterhalb von Content eingefügt.
- Position des Buttons kann mit DIV Klasse `customButtonPosition` gesteuert werden: ```
    <div class="customButtonPosition"></div>
    ```

---

## Einsatzmuster

- **Lineares Weiter**: „Weiter“ → nächste Szene.
- **Entscheidungen/Abzweigungen**: Mehrere Buttons mit unterschiedlichen Ziel­szene(n) („Tür A“, „Tür B“).
- **Optionale Inhalte**: „Mehr erfahren“, „Hinweis anzeigen“, „Zur Karte“.
- **Rücksprung**: „Zur Übersicht“/„Zurück zur Karte“.

---

## Gestaltungs- &amp; UX-Tipps

- **Kontrast** sicherstellen: Helle Schrift auf dunklem Hintergrund oder umgekehrt (AA-Kontrast ≥ 4.5:1 anstreben).
- **Konsistenz**: Primäre Aktion (z. B. „Weiter“) immer gleiche Farbe; sekundäre Aktionen in neutralen Tönen.
- **Größe/Touch-Ziel**: Genug Platz (mind. ~44 px Höhe) und Abstand zwischen mehreren Buttons.
- **Icon-Hilfe**: Du kannst vor dem Text **Emoji** nutzen (z. B. 🔍 „Suchen“, 🧭 „Zur Karte“).
- **Deaktivierte Logik**: Wenn ein Button erst nach Bedingung aktiv sein soll, blende ihn vorher aus oder ersetze ihn durch Hinweistext (statt „toter“ Buttons).

---

## Kombinationen

- **Mit Wegpunkten**: Button erst nach Erreichen eines Wegpunkts anzeigen (Story-Gating).
- **Mit QR/NFC**: Button bietet Wahl: „Scannen“ oder „Überspringen (Hinweis)“.
- **Mit Dialogen/Medien**: Unter Text, Bild, Audio oder Video als klare Call-to-Action platzieren.

---

## Kurz-Checkliste

1. **Text** setzen (klar &amp; kurz).
2. **Zielszene** auswählen.
3. **Farben** (Brand) wählen, Kontrast prüfen.
4. Vorschau checken → **Speichern**.

Fertig – der Button führt die Spielenden zuverlässig zur nächsten Station deiner Story.