Init

docs/EXPERIMENTA_BUTTON.md

@@ -0,0 +1,103 @@
+# experimenta Button Component
+
+## Beschreibung
+
+Der experimenta-Button ist eine spezielle Button-Variante, die das offizielle experimenta-Design umsetzt. Der Button verfügt über einen animierten Gradient-Effekt beim Hovern, der von Pink (#e6007e) zu Rot (#e40521) wechselt.
+
+## Design-Eigenschaften
+
+- **Farben**: Pink (#e6007e) zu Rot (#e40521) Gradient
+- **Border-Radius**: 25px (abgerundete Ecken)
+- **Padding**: 10px 30px (Desktop), 8px 24px (Mobile)
+- **Font-Size**: 18px (Desktop), 16px (Mobile)
+- **Hover-Effekt**: Animierter Gradient, der sich über 1 Sekunde von links nach rechts bewegt
+- **Transition**: Smooth transition für alle Eigenschaften (0.3s ease)
+
+## Verwendung
+
+### Als Button
+
+```vue
+<UiButtonButton variant="experimenta" size="experimenta" @click="handleClick">
+  Button Text
+</UiButtonButton>
+```
+
+### Als Link
+
+```vue
+<UiButtonButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
+  Zur experimenta Startseite
+</UiButtonButton>
+```
+
+### Mit NuxtLink
+
+```vue
+<UiButtonButton variant="experimenta" size="experimenta" as="NuxtLink" to="/some-page">
+  Interne Seite
+</UiButtonButton>
+```
+
+## Props
+
+- **variant**: `"experimenta"` (erforderlich für das experimenta-Design)
+- **size**: `"experimenta"` (empfohlen für das richtige Padding und die Schriftgröße)
+- **as**: `"button"` (Standard) | `"a"` | `"NuxtLink"` - Element-Typ
+- **href** / **to**: URL/Route (wenn `as="a"` oder `as="NuxtLink"`)
+- **@click**: Event-Handler (wenn `as="button"`)
+
+## Responsive Verhalten
+
+Der Button passt sich automatisch an mobile Geräte an:
+- **Desktop**: 18px Schriftgröße, 10px 30px Padding
+- **Mobile (≤480px)**: 16px Schriftgröße, 8px 24px Padding
+
+## Beispiel
+
+Live-Beispiel auf der Startseite: `app/pages/index.vue`
+
+## Technische Details
+
+### Implementierung
+
+Die Button-Komponente verwendet:
+- `class-variance-authority` (CVA) für Varianten-Management
+- `reka-ui` Primitive für Flexibilität
+- Custom CSS für den Gradient-Effekt (`assets/css/main.css`)
+- CSS Custom Properties für Farben (`--color-pink`, `--color-pink-dark`)
+
+### Dateien
+
+- **Komponente**: `app/components/ui/button/Button.vue`
+- **Varianten**: `app/components/ui/button/index.ts`
+- **Styles**: `assets/css/main.css` (`.btn-experimenta`)
+
+## CSS-Implementierung
+
+Der Gradient-Effekt wird mit Custom CSS implementiert:
+
+```css
+.btn-experimenta {
+  background: var(--color-pink);
+  background-image: linear-gradient(to left, var(--color-pink), var(--color-pink), var(--color-pink-dark), var(--color-pink));
+  background-size: 300%;
+  background-position: 0%;
+  transition: background-position 1s ease, all 0.3s ease;
+  cursor: pointer;
+}
+
+.btn-experimenta:hover {
+  background-position: 100%;
+}
+```
+
+## Barrierefreiheit
+
+Der Button unterstützt:
+- ✅ Keyboard-Navigation (Tab, Enter, Space)
+- ✅ Focus-Styles
+- ✅ Screen-Reader (via Primitive-Komponente)
+- ✅ Disabled-State
+
+