.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Pull Button

buttonPro

A button that leans toward the cursor from a distance and springs back, with a colour fill that wipes in from the exact entry point and out toward the exit point.

Opening soon

Pro cannot be bought yet. The page opens when payment is ready.

Width

The preview could not load.

Live demo. The theme switches the demo itself.

pull-button.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type PullButtonProps = {  ref?: Ref<HTMLButtonElement>  range?: number  strength?: number  color?: string  textColor?: string  fillColor?: string  fillTextColor?: string  borderWidth?: number  borderColor?: string  duration?: number  className?: string}export function PullButton({  ref,  range = 90,  strength = 0.35,  color = 'var(--color-foreground)',  textColor = 'var(--color-background)',  fillColor = 'var(--color-primary)',  fillTextColor = 'var(--color-primary-foreground)',  borderWidth = 0,  borderColor,  duration = 480,  className,}: PullButtonProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

The code is locked

Pull Button is part of Manniche UI Pro. A key unlocks the source of all 60 effects.

Opening soon

€49 · Introductory price until 31 December 2026. €79 after that.

One-off payment
One developer
Your key arrives by email straight away
No VAT (§ 19 UStG)

Have a key? Get the code with the CLI or MCP.

The key lives in MANNICHE_PRO_KEY, never in your code or a URL. How to set it up

CLInpx shadcn@latest add @manniche-pro/pull-button

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

PullButtonProps

Prop	Type	Default	What it does
`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.

Also takes every prop from ButtonHTMLAttributes<HTMLButtonElement>.

Preview

Code

The code is locked

Props

A11y