Magnetic Button için Description (daha önce hazırladığımız metin, temiz halde):
Magnetic Button adds a tactile, premium micro-interaction to any call-to-action.
As the cursor approaches, the button is gently pulled toward it like a magnet. The label drifts a little less than the button itself, creating a subtle parallax depth, and an optional hover scale adds extra lift. The moment the cursor leaves, everything springs smoothly back to rest.
SETUP
Label, link and open-in-new-tab
Works with Framer's native sizing — set the layer to Fit to size by the label and padding, or Fixed for an exact size
STYLE
Font (any Google Font, with weight and size)
Text colour, background, corner radius
Padding X / Y, border width and colour
Text alignment
MAGNETIC FEEL
Strength: how strongly the button is pulled toward the cursor
Field: the distance around the button where the pull begins
Text Parallax: how much the label drifts relative to the button
Spring: looser and slower, or tight and snappy
Hover Scale: optional lift on hover
Fully responsive, built with clean code — no dependencies, no WebGL. Every property is editable directly in Framer.
Perfect for hero CTAs, pricing buttons, contact links and anywhere you want a button that invites a click.
Free to use — enjoy, and check out my other Framer components.
Magnetic Button için Description (daha önce hazırladığımız metin, temiz halde):
Magnetic Button adds a tactile, premium micro-interaction to any call-to-action.
As the cursor approaches, the button is gently pulled toward it like a magnet. The label drifts a little less than the button itself, creating a subtle parallax depth, and an optional hover scale adds extra lift. The moment the cursor leaves, everything springs smoothly back to rest.
SETUP
Label, link and open-in-new-tab
Works with Framer's native sizing — set the layer to Fit to size by the label and padding, or Fixed for an exact size
STYLE
Font (any Google Font, with weight and size)
Text colour, background, corner radius
Padding X / Y, border width and colour
Text alignment
MAGNETIC FEEL
Strength: how strongly the button is pulled toward the cursor
Field: the distance around the button where the pull begins
Text Parallax: how much the label drifts relative to the button
Spring: looser and slower, or tight and snappy
Hover Scale: optional lift on hover
Fully responsive, built with clean code — no dependencies, no WebGL. Every property is editable directly in Framer.
Perfect for hero CTAs, pricing buttons, contact links and anywhere you want a button that invites a click.
Free to use — enjoy, and check out my other Framer components.
