{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "kontur-button-zeichnen",
 "name": "Kontur-Button, der sich zeichnet",
 "name_en": "Outline button with self-drawing border",
 "kurz": "Ein Outline-Button, dessen Kontur sich bei Hover und Fokus einmal um ihn herum zeichnet: als Linie, als wachsende Ecken, als aufrückende Doppelkontur oder als wandernde Striche.",
 "kategorie": "Buttons",
 "kategorie_slug": "buttons",
 "kategorie_nr": 18,
 "bau_chat": "B",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "luxuriös"
 ],
 "stimmung_roh": [
  "ruhig",
  "elegant",
  "fein"
 ],
 "technik": [
  "svg",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "canvas"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Ein Outline-Button, dessen Kontur sich bei Hover oder Fokus zeichnet. In Ruhe liegt eine feine Grundlinie, darüber läuft eine kräftigere Linie einmal um den Button. Spielarten: eine Linie zeichnet sich (SVG-rect mit pathLength und stroke-dashoffset), vier Eckklammern wachsen zur geschlossenen Kontur, eine zweite versetzte Kontur rückt auf die erste, oder eine gestrichelte Kontur setzt sich in Bewegung.",
  "warum_es_wirkt": "Die Linie ist die ruhigste Form von Rückmeldung: keine Fläche, keine Farbe, nur ein Strich, der sich schließt. Das passt zu Marken, die mit Raum und Feinheit arbeiten. Der Zeichenvorgang lenkt den Blick, ohne die Seite lauter zu machen.",
  "wann_einsetzen": "Für Nebenaktionen neben einem gefüllten Hauptbutton (Details, Kaliber ansehen, Programm, Katalog) und für Karten in Kollektionen und Programmen. Rezepte: Luxus und Manufaktur, Architektur, Fotografie, Kultur (Eckklammern).",
  "wann_nicht": "Nicht als einziger oder wichtigster Button, wenn die Kontur wenig Kontrast hat: Outline ist sekundär. Nicht bei Pillen oder Formen mit stark gekrümmter Kontur, wenn die Linie ungleichmäßig wirkt. Laufende Striche nie dauerhaft, nur solange der Button Fokus oder Hover hat, und nie mehrere gleichzeitig.",
  "varianten": [
   "zeichnen: SVG-rect mit pathLength=1, stroke-dasharray 1 1, stroke-dashoffset 1 → 0 bei Hover und Fokus",
   "ecken: vier Eckklammern liegen in Ruhe, bei Hover wachsen sie zur geschlossenen Kontur",
   "doppel: eine zweite Kontur liegt 3 px versetzt dahinter und rückt bei Hover auf die erste",
   "laufend: gestrichelte Kontur, die Striche wandern nur bei Hover und Fokus und halten nach wenigen Umläufen an"
  ],
  "umsetzung": "Button oder Link mit echtem border (Grundlinie, auch für Kontrastmodus und ohne SVG) und einem inneren <svg aria-hidden=\"true\" focusable=\"false\"> ohne viewBox über die ganze Fläche (position absolute, inset -1px, overflow visible). Das rect hat width/height=\"100%\" als Attribut und per CSS x/y .75px und calc(100% - 1.5px), damit der Strich genau auf der Kante liegt; pathLength=\"1\" macht die Dash-Rechnung unabhängig von der Größe. Zeichnen: stroke-dasharray 1 1, dashoffset 1 → 0 bei :hover (nur @media (hover: hover)) und :focus-visible; die Übergangsdauer steht am Zielzustand, hin 480 ms expo-out, zurück 310 ms expo-in (Rezept: Öffnen langsamer als Schließen). Ecken: vier span mit je zwei Rändern, Breite und Höhe 12 px → 50 % + 1 px. Doppel: ::after mit 3 px Versatz. Laufend: zweites rect mit Pixel-Strichen, Animation mit begrenzter Iterationszahl. Laden nutzt dasselbe rect als umlaufendes Viertel. Ein Outline-Button ist sekundär: daneben steht ein gefüllter Hauptbutton.",
  "mobil": "Ohne Hover steht die Kontur geschlossen da (Endzustand), Druck über einen kurzen Farbwechsel der Fläche. Trefferfläche mindestens 44 px hoch.",
  "reduzierte_bewegung": "Kein Zeichnen: Die Kontur erscheint bei Hover und Fokus sofort vollständig (Deckkraft 150 ms). Laufende Striche stehen still.",
  "barrierefreiheit": "Grundkontur in Ruhe mit mindestens 3:1 gegen den Grund (WCAG 1.4.11), Text mindestens 4,5:1. Fokus über :focus-visible mit eigener Fokuskontur im Abstand, nicht nur über die gezeichnete Linie. Das SVG ist aria-hidden. Laufende Striche starten nur durch Hover oder Fokus und halten nach wenigen Umläufen an (WCAG 2.2.2). Im Kontrastmodus bleibt der echte border in ButtonText."
 },
 "messwerte": {
  "easing": "Codrops ease-in-out; CodyHouse Standardkurve",
  "dauer_ms": "Codrops 800 (Linien), 400 (Fläche, Text); CodyHouse 500",
  "stagger_ms": "Codrops 100 Verzögerung der Linien",
  "distanz": "Kontur einmal um den Button (pathLength 1)",
  "sonstiges": "Werte der Demo eigene Festlegung nach dem Bewegungsstil des Rezepts (siehe bau.werte)",
  "herkunft": "beobachtet",
  "quelle": "https://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/ und https://codyhouse.co/nuggets/self-drawing-svg-animation"
 },
 "kurve": {
  "bezier": [
   0.42,
   0,
   0.58,
   1
  ],
  "css": "cubic-bezier(0.42, 0, 0.58, 1)",
  "name": "ease-in-out",
  "dauer_ms": 800
 },
 "gesehen_bei": [
  {
   "seite": "Codrops: Creating a Border Animation Effect with SVG and CSS",
   "url": "https://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: Rahmen aus vier SVG-Linien mit stroke-dasharray (330 240 bzw. 490 400), die beim Hover per translate um die Ecken gleiten; .8s ease-in-out mit 0.1s Verzögerung; Hintergrund und Textfarbe 0.4s mit 0.5s Verzögerung. Der Artikel verwirft das direkte Animieren der Dash-Werte damals als fehleranfällig.",
   "art": "tutorial"
  },
  {
   "seite": "CodyHouse: Self-drawing SVG animation",
   "url": "https://codyhouse.co/nuggets/self-drawing-svg-animation",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: stroke-dasharray und stroke-dashoffset auf die Pfadlänge, beim Hover dashoffset → 0, Übergang .5s; Pfadlänge fest (367) oder per getTotalLength(); preserveAspectRatio none, damit das SVG die Textbox füllt.",
   "art": "tutorial"
  },
  {
   "seite": "yuanchuan: Fun with stroke-dasharray",
   "url": "https://yuanchuan.dev/fun-with-stroke-dasharray",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 02.11.2026: pathLength am rect normiert die Dash-Rechnung (pathLength 40, stroke-dasharray 2 8); Hinweis, dass Browser beim Anfangspunkt unterschiedlich runden.",
   "art": "artikel"
  },
  {
   "seite": "Osmo: Draw Random Underline",
   "url": "https://www.osmo.supply/resource/draw-random-underline",
   "auszeichnung": "",
   "beobachtung": "In der Osmo-Kategorie Buttons gelistet (Titel geprüft 02.11.2026, Inhalt hinter Bezahlschranke): gezeichnete Linie als Hover-Rückmeldung an Links und Buttons.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "CodyHouse: Self-drawing SVG animation",
   "url": "https://codyhouse.co/nuggets/self-drawing-svg-animation"
  },
  {
   "titel": "Codrops: Creating a Border Animation Effect with SVG and CSS",
   "url": "https://tympanus.net/codrops/2014/02/26/creating-a-border-animation-effect-with-svg-and-css/"
  }
 ],
 "kombinierbar_mit": [
  "button-zustaende",
  "fokus-stil-system",
  "unterstreichung-varianten",
  "svg-pfad-zeichnen-scroll",
  "token-toggle-asymmetrisch",
  "token-swiss-knackig",
  "kontrastmodus-forced-colors"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/",
  "meta": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "Die Recherche nannte für Codrops rect mit pathLength; der Artikel nutzt tatsächlich vier Linien mit dasharray und translate (WebFetch 02.11.2026). Die pathLength-Technik ist über CodyHouse (Dash-Offset auf Pfadlänge) und yuanchuan (pathLength am rect) belegt.",
   "Kein Produktionsbeleg einer Website mit gezeichneter Button-Kontur geprüft; Osmo nur als Titel. Deshalb teilbelegt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein Outline-Button, dessen Kontur sich bei Hover und Fokus einmal um ihn herum zeichnet: als Linie, als wachsende Ecken, als aufrückende Doppelkontur oder als wandernde Striche.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "zeichnen": {
    "technik": "SVG ohne viewBox, inset -1px; rect pathLength=1, x/y .75px, Breite/Höhe calc(100% - 1.5px)",
    "dash": "stroke-dasharray 1 1, stroke-dashoffset 1 → 0",
    "auf": "480 ms cubic-bezier(0.16, 1, 0.3, 1)",
    "zu": "310 ms cubic-bezier(0.7, 0, 0.84, 0)",
    "strich_px": 1.5
   },
   "grundlinie": "border 1px rgba(35,40,47,.55) auf Weiß (≥ 3:1), rgba(255,255,255,.5) auf Anthrazit",
   "strich": "#23282f auf Weiß, #ffffff auf Anthrazit",
   "button": "min-height 52px, padding 0 30px, Label Instrument Sans .75rem versal +0.08em, eckig (Radius 0)",
   "druck": "Hintergrund rgba(35,40,47,.06) bzw. rgba(255,255,255,.08), 125 ms linear",
   "fokus": "outline 1px solid #a88a5a, offset 5px, plus gezeichnete Kontur",
   "laden": "Viertel der Kontur läuft um: dasharray .22 .78, 1200 ms linear infinite; Label „Wird vorbereitet“, aria-disabled, role=status; fertig nach 2200 ms (Demo)",
   "deaktiviert": "Grundlinie gestrichelt, keine Zeichnung, aria-disabled + aria-describedby mit Begründung",
   "farben": {
    "anthrazit": "#23282f",
    "weiss": "#ffffff",
    "flaeche": "#f4f4f2",
    "linie": "#d9dadb",
    "messing": "#a88a5a (3,3:1 auf Weiß, 4,6:1 auf Anthrazit)",
    "leise": "#62676e (5,7:1)"
   },
   "vorfuehrung": "Zeiger 700 ms cubic-bezier(0.16, 1, 0.3, 1), Hover 750–2900 ms, zweites Mal 4100–5600 ms, Schleife 6400 ms"
  },
  "ausloeser": "hover",
  "touch": "Ohne Hover steht die Kontur geschlossen (Endzustand): Linie gezeichnet, Ecken geschlossen, Doppelkontur aufgerückt. Druck über leichte Flächentönung; unter 640 px volle Breite.",
  "reduziert": "Kein Zeichnen: Die Kontur erscheint bei Hover und Fokus vollständig über Deckkraft (150 ms linear). Ecken und Doppelkontur springen ohne Übergang, Striche und Lade-Umlauf stehen still.",
  "korrekturen": {
   "umsetzung": "Button oder Link mit echtem border (Grundlinie, auch für Kontrastmodus und ohne SVG) und einem inneren <svg aria-hidden=\"true\" focusable=\"false\"> ohne viewBox über die ganze Fläche (position absolute, inset -1px, overflow visible). Das rect hat width/height=\"100%\" als Attribut und per CSS x/y .75px und calc(100% - 1.5px), damit der Strich genau auf der Kante liegt; pathLength=\"1\" macht die Dash-Rechnung unabhängig von der Größe. Zeichnen: stroke-dasharray 1 1, dashoffset 1 → 0 bei :hover (nur @media (hover: hover)) und :focus-visible; die Übergangsdauer steht am Zielzustand, hin 480 ms expo-out, zurück 310 ms expo-in (Rezept: Öffnen langsamer als Schließen). Ecken: vier span mit je zwei Rändern, Breite und Höhe 12 px → 50 % + 1 px. Doppel: ::after mit 3 px Versatz. Laufend: zweites rect mit Pixel-Strichen, Animation mit begrenzter Iterationszahl. Laden nutzt dasselbe rect als umlaufendes Viertel. Ein Outline-Button ist sekundär: daneben steht ein gefüllter Hauptbutton."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept luxus-manufaktur-stille, erfundener Uhrmacher Karner in Klagenfurt. Kontext: Produkt-Hero (Wörth 38, eigene SVG-Uhr) mit gefülltem Hauptbutton und Kontur-Button, darunter Kollektion auf Anthrazit mit hellen Kontur-Buttons, einem deaktivierten (ab März 2027) und einem mit Laden und Fertig-Zustand (Katalog). Messing nur für Fokus und Doppelkontur, Meta-Grau auf #62676e angehoben (#8b9097 hat nur 3,2:1). Vier Varianten statt drei, weil der Auftrag alle vier nennt. Belege: tympanus.net, codyhouse.co, yuanchuan.dev. Prüfung: pruef.sh alle Varianten ok, zugang.sh regeln/breite320 ohne Fehler. AD-Review 02.11.2026: Note 4. Lücke nach dem W in „Wörth“ (Bodoni Moda ohne Kernpaar W–ö) per Unterschneidung −0,09 em geschlossen.",
  "varianten": [
   {
    "id": "zeichnen",
    "name": "Linie zeichnet sich",
    "wann": "Grundvariante für ruhige Marken: Luxus und Manufaktur, Architektur, Fotografie; Nebenaktion neben gefülltem Hauptbutton.",
    "werte": {
     "dash": "pathLength 1, dashoffset 1 → 0",
     "auf_ms": 480,
     "zu_ms": 310
    }
   },
   {
    "id": "ecken",
    "name": "Eckklammern schließen sich",
    "wann": "Kultur, Programm und Ausstellung, Architektur: die Klammern rahmen schon in Ruhe wie Passermarken und schließen sich bei Hover.",
    "werte": {
     "ecke_px": "12 → calc(50% + 1px)",
     "rand_px": 1.5,
     "auf_ms": 480,
     "zu_ms": 310
    }
   },
   {
    "id": "doppel",
    "name": "Doppelkontur rückt auf",
    "wann": "Manufaktur, Juwelier, Papeterie: Messing-Kontur liegt 3 px versetzt wie ein Druck mit Passerfehler und rückt bei Hover auf die erste.",
    "werte": {
     "zweite_kontur": "1px solid #a88a5a, translate(3px, 3px) → 0, Hover-Farbe = Strich",
     "auf_ms": 480,
     "zu_ms": 310
    }
   },
   {
    "id": "laufend",
    "name": "Gestrichelte Kontur läuft",
    "wann": "Sparsam für Aktionen, die etwas anstoßen (Katalog, Download); die Striche wandern nur bei Hover und Fokus und halten nach drei Umläufen an.",
    "werte": {
     "dash_px": "7 5, Strich 1,25 px, Grundlinie transparent",
     "umlauf": "stroke-dashoffset 0 → -48, 1600 ms linear, 3 Umläufe"
    }
   }
  ]
 }
}