Draw Outline
No library Beginner
Four border lines draw themselves clockwise around the button on hover using staggered CSS transform transitions. No dependencies.
LLM Prompt
Goal: Create a "Draw Outline" button animation.
Visual behavior: On hover, four border lines draw themselves around the button in clockwise sequence — top (left→right), right (top→bottom), bottom (right→left), left (bottom→top). Each line takes 300ms; each starts after the previous finishes (staggered by 300ms). Total outline draw time ~1.2s. On mouse-out, lines retract instantly (no reverse delay).
Technique: Four absolutely-positioned <span> elements, each 2px thick, covering one side of the button.
- Top: full width, scaleX 0→1, origin-left
- Right: full height, scaleY 0→1, origin-top
- Bottom: full width, scaleX 0→1, origin-right
- Left: full height, scaleY 0→1, origin-bottom
Use Tailwind transition-transform + transition-delay utilities. All transforms are GPU-only (no width/height animation).
Accessibility: Use motion-reduce:hidden on the animated spans and motion-reduce:block on a static border fallback span.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.