Pull Button
buttonProEin Button, der sich schon aus der Ferne zum Mauszeiger neigt und zurückfedert, mit einer Farbfüllung, die vom genauen Eintrittspunkt hereinläuft und zum Austrittspunkt hin wieder hinausläuft.
Pro kann noch nicht gekauft werden. Die Seite öffnet, sobald die Zahlung bereit ist.
Vorschau
Live-Demo. Das Theme schaltet die Demo selbst um.
Code
Der Code ist gesperrt
Pull Button gehört zu Manniche UI Pro. Ein Schlüssel öffnet den Quellcode aller 60 Effekte.
Bald verfügbar49 € · Einführungspreis bis einschließlich 31. Dezember 2026. Danach 79 €.
- Einmalzahlung
- Ein Entwickler
- Der Schlüssel kommt sofort per E-Mail
- Keine Umsatzsteuer (§ 19 UStG)
Hast du einen Schlüssel? Hol den Code mit der CLI oder per MCP.
Der Schlüssel liegt in MANNICHE_PRO_KEY, nie im Code oder in der Adresse. So richtest du ihn ein
npx shadcn@latest add @manniche-pro/pull-buttonclaude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"Props
PullButtonProps
| Prop | Typ | Standard | Was sie tut |
|---|---|---|---|
ref | Ref<HTMLButtonElement> | – | Ref to the real <button>. |
range | number | 90 | How far from the button (px, measured from its edge) the cursor starts to pull it. 0 turns the magnet off. |
strength | number | 0.35 | How much of the cursor offset the button follows, 0 to 1. Around 0.3 feels firm, 0.6 is loose. |
color | string | 'var(--color-foreground)' | Resting background. Any CSS colour or var(). Defaults to the foreground token. |
textColor | string | 'var(--color-background)' | Text colour at rest. Defaults to the background token. |
fillColor | string | 'var(--color-primary)' | Colour that wipes in on hover. Defaults to the primary token. |
fillTextColor | string | 'var(--color-primary-foreground)' | Text colour on the wipe. Defaults to the primary-foreground token. |
borderWidth | number | 0 | Border width in px; 0 for none. |
borderColor | string | – | Border colour. Defaults to fillColor, so a bordered button keeps a rim while the fill passes. |
duration | number | 480 | Length of the wipe in milliseconds. |
Nimmt auch alle Props von ButtonHTMLAttributes<HTMLButtonElement>.
A11y
Noch keine Hinweise zur Barrierefreiheit.
Die Hinweise kommen mit dem Quellcode, wenn Pro öffnet.