design-infraReport a problem or share feedback← Catalog
Magnetic Fill Button
curatedfreemicrokit/magnetic-fill-button
A magnetic pill button with a bottom-to-top background fill.
$
npx shadcn@latest add https://microkit.co/r/magnetic-fill-button.jsonOur notes
Zero-dependency magnetic button: pointermove writes CSS vars (14%/22% of the cursor offset) that translate the pill, and a fill rises bottom-to-top on hover/focus (380ms). Much lighter than Motion-based magnets. No reduced-motion guard on the translate; the outline, text and #f97316 fill are hard-coded — use border-foreground and a bg-primary fill with text-primary-foreground.- Source
- MicroKit
- Kind
- component
- Categories
- button
- Use as
- recipe — technique you apply to your own markup
- Applies to
- buttoncta
- Motion
- on hover, cursor · subtle · css + js · low cost · ignores reduced motion
- Tags
- css, hover, magnetic, hard-coded-colours
- Licence
- MIT ("MIT License — Copyright (c) 2026 Henrique Barone", github.com/henriquegpb/microkit). README credits note that some interactions are adapted from publicly shared examples and Webflow exports.
- Live demo
- microkit.co
- Docs
- microkit.co
Similar
Compare all 4 →- Icon Swap Buttonmicrokit/icon-swap-buttonOn hover/focus-visible the leading icon (an Apple mark in the demo) collapses out while an arrow opens in on the other side, so the button never changes width (520ms ease-out transitions on width/margin/opacity). Great for download/CTA buttons. No reduced-motion guard; light-dark() hex colours.
- Staggered Letter Text Swapmicrokit/staggered-letter-text-swapEach letter rolls up and is replaced by its twin with a 34ms stagger on hover/focus-visible — pure CSS transitions via a --letter-delay var; the button carries aria-label and the letter spans are aria-hidden; motion-reduce handled. Remove the hard-coded font-[Arial] and light-dark() text colour so it inherits your type and tokens. Nav links and text CTAs.
- Noise Backgroundaceternity/noise-backgroundAnimated gradient + noise texture. Works for editorial/brutalist when toned down.