2.8 KiB

Raw Blame History

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

<Button variant="experimenta" size="experimenta" @click="handleClick">
  Button Text
</Button>

Als Link

<Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
  Zur experimenta Startseite
</Button>

Mit NuxtLink

<Button variant="experimenta" size="experimenta" as="NuxtLink" to="/some-page">
  Interne Seite
</Button>

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:

.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

2.8 KiB Raw Blame History