Button Motion Set

A cohesive set of 6 animated buttons: magnetic, shine-sweep, morph-to-loader, icon-nudge, gradient-ring, ghost-fill.

3.5k views 371 copies 296 từ

Nội dung prompt

# Button Motion Set — UI Component Set

## Goal
Build six production-grade animated button variants sharing one base API, presented in a small demo grid. It must drop cleanly into an existing Next.js + Tailwind project as a self-contained component.

## Design Spec
- Shared base: h-11 px-6 rounded-lg font-medium text-sm, focus-visible ring, disabled 50% + no animations; sizes sm/md/lg via prop.
- 1 **Magnetic** — button translates up to 6px toward cursor within a 40px proximity field, springs back on leave.
- 2 **Shine sweep** — a 60% width diagonal white/20 gradient sweeps across on hover (50

Mở khoá prompt đầy đủ 296 từ với gói trọn đời trả một lần.

Unlock Full Prompt