{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "pfeil-icon-button",
 "name": "Pfeil-Icon-Button",
 "name_en": "Arrow icon button (circle expand, arrow swap, Stripe line, side switch)",
 "kurz": "Pfeil-Pillen eines Architekturbüros, bei denen nur das Icon sich bewegt: Kreis wird Fläche, Pfeil tauscht, Stripe-Linie oder Kreis wechselt die Seite.",
 "kategorie": "Buttons",
 "kategorie_slug": "buttons",
 "kategorie_nr": 18,
 "bau_chat": "B",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "ruhig",
  "klar"
 ],
 "technik": [
  "css",
  "svg",
  "clip-path",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Eine Pille oder ein Textlink mit Pfeil, bei der nur das Icon die Bewegung trägt. Vier Spielarten: Der Icon-Kreis wächst zur ganzen Fläche (kreis-expand). Der Pfeil fährt hinaus und ein zweiter kommt von der anderen Seite nach (tausch). Ein Schaft blendet ein und die Spitze rückt 3 px vor wie bei Stripe (linie). Oder der Kreis wechselt die Seite und das Label weicht aus (seitenwechsel).",
  "warum_es_wirkt": "Der Pfeil zeigt die Richtung der Handlung, die Bewegung bestätigt den Hover ohne Farbschrei. Weil sich nur das kleine Icon bewegt, bleibt die Seite ruhig und das Label lesbar. Die Geste ist vertraut: Studios, Produktseiten und Komponentenbibliotheken nutzen sie seit Jahren.",
  "wann_einsetzen": "Für Links und Buttons, die irgendwohin führen: „Projekte ansehen“, „Nächstes Projekt“, „Weitere Projekte“, „Gespräch anfragen“, Weiter in Listen und Bildfolgen. kreis-expand für laute Studio-Seiten, linie für ruhige Büros und Kanzleien, tausch für Immobilien und Luxus, seitenwechsel für Freelancer.",
  "wann_nicht": "Nicht bei Handlungen ohne Richtung (Speichern, Kaufen, Absenden: dort Häkchen, Tasche oder button-zustaende). Nicht mehr als ein Icon pro Button. Nicht in jedem Link einer Fließtextpassage. Nie als einziges Signal: Das Label nennt das Ziel.",
  "varianten": [
   "kreis-expand: Icon-Kreis wächst per clip-path zur ganzen Pille, das Label wechselt die Farbe",
   "tausch: Pfeil fährt aus dem Kreis, ein zweiter kommt 40 ms später von der anderen Seite nach",
   "linie: Schaft blendet ein, die Spitze rückt 3 px vor (Stripe-Prinzip); für Textlinks",
   "seitenwechsel: Icon-Kreis wandert von rechts nach links, das Label rückt nach rechts"
  ],
  "umsetzung": "Echtes <a> für Ziele, <button> für Handlungen auf der Seite. Label als Text, Icon als inline-SVG mit aria-hidden; das SVG hat Schaft und Spitze als eigene Pfade, für tausch gibt es eine zweite Pfeilgruppe. kreis-expand: ::after mit clip-path circle(20px at calc(100% - 24px) 50%) wächst auf circle(150% …). tausch: Kreis mit overflow hidden, Pfeil A und B per translate. linie: Schaft opacity, Spitze translate 3px. seitenwechsel: Kreis absolut rechts, translate um die gemessene Breite minus 48 px (CSS-Variable aus ResizeObserver). Hover nur in @media (hover: hover), dieselben Zustände bei :focus-visible und :active. Eintritt mit der Eintrittskurve 250 ms, Rückweg mit der Austrittskurve in 175 ms. Richtung per Attribut: unten dreht das Icon um 90°, zurück spiegelt es.",
  "mobil": "Ohne Hover zeigt linie den Schaft dauerhaft, die anderen Varianten spielen kurz beim Tippen. Pillen und Icon-Knöpfe 48 px hoch, in Listen ist die ganze Zeile das Ziel.",
  "reduzierte_bewegung": "Keine Wege: kreis-expand blendet die Fläche über Deckkraft ein, tausch und seitenwechsel bleiben stehen, linie zeigt den Schaft ohne Vorrücken. Farbwechsel bleiben.",
  "barrierefreiheit": "WCAG 2.4.4 Linkzweck: Das Label nennt das Ziel, der Pfeil ist aria-hidden. Icon-Knöpfe (Vorheriges, Nächstes Projekt) haben einen versteckten Text als Namen. 2.5.8: 48 px Ziel. 1.4.3: Label auch gefüllt mindestens 4,5:1 (Weiß auf #231f20, #231f20 auf #e1e3e3). 2.4.7: Fokus sichtbar, Fokus löst dieselbe Bewegung aus wie Hover. Deaktiviert über disabled mit gedämpfter Textfarbe statt Deckkraft; wird ein Knopf am Ende der Bildfolge deaktiviert, wandert der Fokus zum anderen. Laden über aria-busy, Ergebnis in einer role=status-Zeile."
 },
 "messwerte": {
  "easing": "Eintritt cubic-bezier(0.25, 1, 0.5, 1), Austritt cubic-bezier(0.5, 0, 0.75, 0) (token-swiss-knackig, Rezept architektur-ruhiges-raster)",
  "dauer_ms": "Hover 250, Rückweg 175, Farbe 125",
  "stagger_ms": "tausch: Pfeil B 40 nach Pfeil A",
  "distanz": "linie: Spitze 3 px (Stripe); tausch 140 % der Kreisbreite; Kreis 40 px in 48-px-Pille",
  "sonstiges": "Druck scale(0.98) 100 ms; Trefferfläche mindestens 48 px hoch",
  "herkunft": "eigene Festlegung",
  "quelle": "https://typefully.com/adamwathan/recreating-stripes-arrow-animation-with-NnPxtVr"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Adam Wathan: Recreating Stripe’s arrow animation",
   "url": "https://typefully.com/adamwathan/recreating-stripes-arrow-animation-with-NnPxtVr",
   "auszeichnung": "",
   "beobachtung": "Pfeil aus zwei SVG-Pfaden in einem viewBox: Der Schaft ist im Ruhezustand unsichtbar (opacity 0) und erscheint bei Hover, die Spitze verschiebt sich um 3 px nach rechts. Pille rounded-full, Hintergrund wird bei Hover heller. Dauern und Kurven nennt der Beitrag nicht.",
   "art": "tutorial"
  },
  {
   "seite": "Osmo: Ressourcen der Kategorie Buttons",
   "url": "https://osmo.supply/updates",
   "auszeichnung": "",
   "beobachtung": "Studio-Bibliothek mit „Button with Bubble Arrow“, „Button with Rotating Icon“ und „Directional Button Hover“; die Kreis-mit-Pfeil-Pille ist dort eigene Button-Gattung. Nur die Titel am 02.11.2026 geprüft, der Code ist kostenpflichtig.",
   "art": "website"
  },
  {
   "seite": "Magic UI: Interactive Hover Button",
   "url": "https://magicui.design/docs/components/interactive-hover-button",
   "auszeichnung": "",
   "beobachtung": "Komponente einer verbreiteten React-Bibliothek, die auf Hover mit einer Übergangs-Animation reagiert; im Seitentext nicht näher beschrieben.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Adam Wathan: Recreating Stripe’s arrow animation",
   "url": "https://typefully.com/adamwathan/recreating-stripes-arrow-animation-with-NnPxtVr"
  }
 ],
 "kombinierbar_mit": [
  "icon-squash-stretch",
  "fuellung-vom-eintrittspunkt",
  "druck-feedback",
  "button-zustaende",
  "unterstreichung-varianten",
  "projektindex-hover-vorschau",
  "scroll-naechstes-projekt",
  "token-swiss-knackig"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/",
  "meta": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "Adam-Wathan-Beitrag am 02.11.2026 per WebFetch gelesen: 3 px und Schaft opacity belegt, keine Dauern.",
   "Osmo-Liste am 02.11.2026 per WebFetch geprüft (nur Titel). Magic-UI-Seite nennt keine Details zur Bewegung.",
   "Dauern und Kurven aus dem Rezept architektur-ruhiges-raster (token-swiss-knackig), nicht gemessen."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Pfeil-Pillen eines Architekturbüros, bei denen nur das Icon sich bewegt: Kreis wird Fläche, Pfeil tauscht, Stripe-Linie oder Kreis wechselt die Seite.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "pille": "min-height 48px, padding 4px 4px 4px 22px, gap 14px, border-radius 999px; Kreis 40px; Hanken Grotesk 500, 1rem",
   "easing": "Eintritt cubic-bezier(0.25, 1, 0.5, 1), Austritt cubic-bezier(0.5, 0, 0.75, 0)",
   "dauer_ms": {
    "ein": 250,
    "aus": 175,
    "farbe": 125,
    "druck": 100,
    "bildwechsel": 500,
    "laden": 900
   },
   "stagger_ms": {
    "tausch_pfeil_b": 40
   },
   "kreis_expand": "::after background #231f20, clip-path circle(20px at calc(100% - 24px) 50%) → circle(150% at …); Label #231f20 → #ffffff; Grund #e1e3e3",
   "tausch": "Pille #231f20, Kreis rgb(255 255 255 / .14); Pfeil A translate 0 → 26px, Pfeil B −26px → 0 (+40 ms); Richtung unten: y statt x",
   "linie": "Textlink, Unterstreichung 1px, Abstand .35ex; Schaft opacity 0 → 1, Spitze translate 0 → 3px (Stripe-Prinzip)",
   "seitenwechsel": "Kontur inset 0 0 0 1px #231f20, padding-right 52px; Kreis translate(calc(48px − Breite)), Label translate 30px; Breite per ResizeObserver als --w",
   "icon_only": "48px rund, Kontur #d6d8d8; kreis-expand füllt von der Mitte (circle 0 → 50 %), seitenwechsel nutzt dort tausch; aria-label über versteckten Text",
   "druck": "scale(.98) 100 ms",
   "deaktiviert": "<button disabled>, Text #57575b, Kreis #a7a9aa, keine Bewegung",
   "laden": "aria-busy, Label „Lädt …“, Drehsymbol 800 ms linear im Kreis",
   "farben": {
    "grund": "#ffffff",
    "flaeche": "#e1e3e3",
    "text": "#231f20",
    "leise": "#6a6a6e",
    "dunkel": "#1f2323",
    "fokus": "#0022ff"
   },
   "fokus": "outline 2px #0022ff, Versatz 3px; auf Dunkel #8fa0ff"
  },
  "ausloeser": "hover",
  "touch": "linie zeigt Schaft und vorgerückte Spitze dauerhaft (auch in den Projektzeilen); die anderen Varianten spielen ihre Bewegung beim Tippen (:active). Pillen und Icon-Knöpfe 48 px; in der Projektliste ist die ganze Zeile das Ziel. Unter 880 px steht die Bildfolge über dem Text.",
  "reduziert": "Keine Wege: kreis-expand blendet die Fläche über Deckkraft in 125 ms ein, tausch und seitenwechsel bleiben stehen, linie zeigt den Schaft ohne Vorrücken, kein Druck-Skalieren. Bildwechsel 120 ms Überblendung, neue Zeilen ohne Einfahren.",
  "korrekturen": {
   "beschreibung": "Eine Pille oder ein Textlink mit Pfeil, bei der nur das Icon die Bewegung trägt. Vier Spielarten: Der Icon-Kreis wächst zur ganzen Fläche (kreis-expand). Der Pfeil fährt hinaus und ein zweiter kommt von der anderen Seite nach (tausch). Ein Schaft blendet ein und die Spitze rückt 3 px vor wie bei Stripe (linie). Oder der Kreis wechselt die Seite und das Label weicht aus (seitenwechsel).",
   "warum_es_wirkt": "Der Pfeil zeigt die Richtung der Handlung, die Bewegung bestätigt den Hover ohne Farbschrei. Weil sich nur das kleine Icon bewegt, bleibt die Seite ruhig und das Label lesbar. Die Geste ist vertraut: Studios, Produktseiten und Komponentenbibliotheken nutzen sie seit Jahren.",
   "wann_einsetzen": "Für Links und Buttons, die irgendwohin führen: „Projekte ansehen“, „Nächstes Projekt“, „Weitere Projekte“, „Gespräch anfragen“, Weiter in Listen und Bildfolgen. kreis-expand für laute Studio-Seiten, linie für ruhige Büros und Kanzleien, tausch für Immobilien und Luxus, seitenwechsel für Freelancer.",
   "wann_nicht": "Nicht bei Handlungen ohne Richtung (Speichern, Kaufen, Absenden: dort Häkchen, Tasche oder button-zustaende). Nicht mehr als ein Icon pro Button. Nicht in jedem Link einer Fließtextpassage. Nie als einziges Signal: Das Label nennt das Ziel.",
   "varianten": [
    "kreis-expand: Icon-Kreis wächst per clip-path zur ganzen Pille, das Label wechselt die Farbe",
    "tausch: Pfeil fährt aus dem Kreis, ein zweiter kommt 40 ms später von der anderen Seite nach",
    "linie: Schaft blendet ein, die Spitze rückt 3 px vor (Stripe-Prinzip); für Textlinks",
    "seitenwechsel: Icon-Kreis wandert von rechts nach links, das Label rückt nach rechts"
   ],
   "umsetzung": "Echtes <a> für Ziele, <button> für Handlungen auf der Seite. Label als Text, Icon als inline-SVG mit aria-hidden; das SVG hat Schaft und Spitze als eigene Pfade, für tausch gibt es eine zweite Pfeilgruppe. kreis-expand: ::after mit clip-path circle(20px at calc(100% - 24px) 50%) wächst auf circle(150% …). tausch: Kreis mit overflow hidden, Pfeil A und B per translate. linie: Schaft opacity, Spitze translate 3px. seitenwechsel: Kreis absolut rechts, translate um die gemessene Breite minus 48 px (CSS-Variable aus ResizeObserver). Hover nur in @media (hover: hover), dieselben Zustände bei :focus-visible und :active. Eintritt mit der Eintrittskurve 250 ms, Rückweg mit der Austrittskurve in 175 ms. Richtung per Attribut: unten dreht das Icon um 90°, zurück spiegelt es.",
   "mobil": "Ohne Hover zeigt linie den Schaft dauerhaft, die anderen Varianten spielen kurz beim Tippen. Pillen und Icon-Knöpfe 48 px hoch, in Listen ist die ganze Zeile das Ziel.",
   "reduzierte_bewegung": "Keine Wege: kreis-expand blendet die Fläche über Deckkraft ein, tausch und seitenwechsel bleiben stehen, linie zeigt den Schaft ohne Vorrücken. Farbwechsel bleiben.",
   "barrierefreiheit": "WCAG 2.4.4 Linkzweck: Das Label nennt das Ziel, der Pfeil ist aria-hidden. Icon-Knöpfe (Vorheriges, Nächstes Projekt) haben einen versteckten Text als Namen. 2.5.8: 48 px Ziel. 1.4.3: Label auch gefüllt mindestens 4,5:1 (Weiß auf #231f20, #231f20 auf #e1e3e3). 2.4.7: Fokus sichtbar, Fokus löst dieselbe Bewegung aus wie Hover. Deaktiviert über disabled mit gedämpfter Textfarbe statt Deckkraft; wird ein Knopf am Ende der Bildfolge deaktiviert, wandert der Fokus zum anderen. Laden über aria-busy, Ergebnis in einer role=status-Zeile."
  },
  "geprueft": "02.11.2026",
  "notiz": "Terhalle Kemper Architekten aus Bocholt (Rezept architektur-ruhiges-raster: nur Hanken Grotesk, Weiß, Hellgrau, Fast-Schwarz, Fokus #0022ff, token-swiss-knackig). Eine Variante gilt für alle Pfeil-Pillen der Seite: Hero-CTA, Icon-Knöpfe der Bildfolge (vorheriges Projekt am Anfang deaktiviert), „Weitere Projekte“ mit Laden und Endzustand, Kontakt-CTA auf Dunkel. Der Textlink „Büro kennenlernen“ und die Projektzeilen bleiben bewusst immer linie (Hierarchie). Bilder: beton-treppe, fenster-licht und ein eigener SVG-Grundriss. vorfuehren() führt einen Zeiger über CTA, Textlink und Weiter-Knopf. Quellen: typefully.com (Adam Wathan zu Stripe), osmo.supply, magicui.design. AD-Review 02.11.2026: Note 4. Ruhige Architektur-Welt, vier klar unterscheidbare Varianten, nichts nachgebessert; das Treppenbild ist jetzt nur noch hier als Hero (bild-scheiben-tiefe umgestellt).",
  "varianten": [
   {
    "id": "kreis-expand",
    "name": "Kreis wird Fläche",
    "wann": "Laute Studio- und Agenturseiten (kreativstudio-buehne) für den einen Haupt-CTA.",
    "werte": {
     "technik": "clip-path circle 20px → 150 %",
     "grund": "#e1e3e3 → #231f20",
     "label": "#231f20 → #ffffff"
    }
   },
   {
    "id": "tausch",
    "name": "Pfeil-Tausch",
    "wann": "Immobilien, Luxus und Hotel: dunkle Pille, ruhige Bewegung nur im Kreis.",
    "werte": {
     "pfeil_a": "0 → 26px",
     "pfeil_b": "−26px → 0, +40 ms",
     "grund": "#231f20"
    }
   },
   {
    "id": "linie",
    "name": "Linie (Stripe)",
    "wann": "Architektur, Kanzlei, Beratung: Textlink statt Pille, die zurückhaltendste Form.",
    "werte": {
     "schaft": "opacity 0 → 1",
     "spitze": "translate 3px",
     "unterstreichung": "1px, .35ex"
    }
   },
   {
    "id": "seitenwechsel",
    "name": "Seitenwechsel",
    "wann": "Freelancer und kleine Studios: Konturpille, bei der der Kreis zur anderen Seite wandert.",
    "werte": {
     "kreis": "translate(48px − Breite)",
     "label": "translate 30px",
     "rahmen": "inset 1px #231f20"
    }
   }
  ]
 }
}