20 INTERAKTIVE BUTTONS — BUTTON-ATELIER

SCHNELLSTART
1. Die ZIP-Datei vollständig entpacken.
2. index.html im Browser öffnen. Das funktioniert auch ohne Internet.
3. Die Buttons mit Maus, Tastatur oder Touch ausprobieren.

DATEIEN
index.html       Eigenständige Vorschau mit Beschreibungen.
buttons.html     Markup zum Einbauen, ohne die Knall-&-Kante-Website.
buttons.css      Alle gemeinsamen Stile und die bt-Designklassen.
buttons.js       Interaktionen, Tastatur und reduzierte Bewegung.
NUTZUNG.txt      Hinweise zur Verwendung.

IN EINE WEBSITE EINBAUEN
Die Datei buttons.css im <head> verlinken:
<link rel="stylesheet" href="/dein-ordner/buttons.css">

Den Inhalt von buttons.html dort einfügen, wo das Beispiel erscheinen soll.
Am Ende der Seite buttons.js genau einmal laden:
<script src="/dein-ordner/buttons.js" defer></script>

Mehrere Beispiele dürfen auf derselben Seite stehen. Die Datei buttons.js initialisiert jeden Bereich mit data-bt-atelier separat und vergibt eindeutige IDs für Dialoge, Labels und SVG-Pfade. Die CSS- und JS-Dateien sind gemeinsame Dateien für alle 20 Varianten. Ein Einzelpaket zeigt nur die gewählte Variante.

Die .bt-stage-Fläche gehört zur Präsentation und zu Effekten wie Wellen oder Sternenstaub. Größe, Hintergrund und Abstände kannst du in buttons.css anpassen. Die bt-Klassen und data-Attribute beim Einbau erhalten.

TEXTE UND FARBEN
Beschriftungen stehen in buttons.html. Änderungen an der Vorschau in index.html vornehmen. Die Palette ist Nachtblau #080b18, Kobalt #073ccf, Rosé #ff7ca2 und Perlmutt #fff9fa. In buttons.css findest du nummerierte Abschnitte für die einzelnen Designs.

EIGENE AKTION STATT DEMO-AKTION
Alle Varianten senden das Ereignis buttonatelier:action. Mit preventDefault() ersetzt du die Demo-Aktion, zum Beispiel durch einen Sprung zu deinem Kontaktbereich:

document.addEventListener('buttonatelier:action', (event) => {
  if (event.detail.variant === 'magnet') {
    event.preventDefault();
    document.querySelector('#kontakt')?.scrollIntoView({ behavior: 'smooth' });
  }
});

Die Varianten-IDs in diesem Paket:
magnet, silk, seal, curtain, ripple, perspective, signature, invitation, stardust, favorite, iris, thread, prism, elevator, echo, capsule, compass, balance, ribbon, finale

Wenn du Markup später dynamisch einfügst, danach ButtonAtelier.init() aufrufen. Mehrfaches Initialisieren bindet keine doppelten Klickaktionen.

DEMO-AKTIONEN
Die Signatur erstellt eine SVG-Beispielkarte; passe deren Text in saveSignature() an. Die Einladung öffnet einen lokalen Beispieldialog. Die Kapsel speichert ihre Botschaft nur für den aktuellen Seitenbesuch und versendet nichts. Favoriten und Fortschritt werden nicht dauerhaft gespeichert. Die Downloads benötigen keine Bibliotheken, API-Schlüssel oder Build-Werkzeuge.

BARRIEREARME BEDIENUNG
Native Buttons, Enter/Leertaste, Fokusmarkierungen, Dialogschließen mit Escape und die Systemeinstellung für reduzierte Bewegung sind berücksichtigt. Die Klickaktionen funktionieren auch ohne Hover. Prüfe Kontraste und Bedienbarkeit nach eigenen Anpassungen erneut.

Quelle: https://knallundkante.de/interaktiv-erleben/button-atelier/
