Compare Features LandingLanding page, 1 page
Flowline SaaS LandingLanding page, 1 page
Prismo Creative AgencyCreative, 1 page
Velour Car DetailingLanding page, 1 pageMagnetic Pull Button
Link buttons that lean toward the pointer: once the cursor enters a halo around a button, a spring pulls the shell toward it while the label travels further (parallax), and a soft spotlight follows the pointer inside; le…
50 sites for €79 only, Compare all plans
All photos and visual assets used in this preview are sourced from Unsplash.
The system behind it
One pattern, your whole brand.
Magnetic Pull Button reads your ACSS tokens, so changing a color, a font or a spacing value once restyles it everywhere. No hard-coded values, nothing to override.
- Type
- Element
- Category
- Buttons
- Responsive
- Desktop to phone
- Works with
- Bricks, ACSS, plain CSS
Options 8
Set on the section, in Bricks’ attributes panel. No code needed.
data-themesurface of the showcase section
data-alignrow alignment
data-strength0-1 · how far the button follows the pointer
data-reachpx · size of the magnetic halo around each button
data-lagextra travel of the label relative to the shell
data-easingfeel of the pull and the release
data-spotpointer spotlight inside the button
data-animentrance of the row
Component props 1
Only the repeating unit is a component. Duplicate, reorder or delete it in Layers and edit these props.
labelGet started
url#
target_self
ariaLabelGet started
stylesolid
sizem
shapepill
showIconTrue
iconarrow
iconPositionend
Free pattern. Yours to use on any site, no plan needed.
Included in Pro €99 once with Pro Unlimited Lifetime: all 785 patterns, unlimited sites.
Get ProMore patterns
