Expand
No library Beginner
Instead of sliding, the thumb expands from a small circle in the corner to flood-fill the entire pill track in rose-red. Toggling back shrinks it. No dependencies.
Instead of sliding, the thumb expands from a small circle in the corner to flood-fill the entire pill track in rose-red. Toggling back shrinks it. No dependencies.
Goal: Create an "Expand" toggle animation.
Visual behavior: A pill toggle (56×30px). Off state: small circle (22×22) in the top-left corner of the track, white/50%, track is dark. On state: that circle smoothly expands to flood-fill the entire track in rose-red (#f43f5e), with top/left snapping to 0 and width/height growing to 100%. Track border tints rose when active. No thumb-sliding — the fill itself IS the feedback.
Technique: position: relative + overflow: hidden on the button. An absolutely-positioned span transitions top, left, width, height independently (not shorthand "all") to avoid linter issues. React useState controls the state. border-color and background-color on the track also transition.
Accessibility: role="switch", aria-checked. Expand transition removed under prefers-reduced-motion.
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.