MotionButton gives your Framer site a premium animated call-to-action button. It can work as a normal button or as a link, with polished hover motion, glow, shine, animated border, cursor glow, magnetic movement, sliding text, arrow animation, loading spinner, and disabled state support. It is designed for hero CTAs, pricing CTAs, contact buttons, product pages, waitlists, and high-converting landing pages.
Includes six variants: solid, outline, ghost, glass, gradient, and magnetic. Supports small, medium, large, and custom sizing, plus auto or fill width behavior. Text sizing can be automatic, preset-based, or custom, with minimum and maximum auto text size controls. Includes editable text, href, new-tab behavior, background colors, hover background, border colors, accent color, gradient colors, glow color, glow intensity, shine intensity, animated border toggle, fill effects, cursor glow, and animation intensity. Fill effects include none, left, right, center, and radial. Text animation can be disabled or set to slide on hover. Supports right, down, and external arrow directions, with left or right icon positioning. Custom left and right icon text fields can replace the arrow. Includes loading state with spinner and loading text, disabled state, hover lift, hover scale, press scale, transition duration, uppercase transform, tracking, and optional accessibility label. Uses pointer tracking for cursor glow and magnetic movement, but disables that behavior on touch devices. Respects reduced-motion preferences and Framer static rendering.
MotionButton gives your Framer site a premium animated call-to-action button. It can work as a normal button or as a link, with polished hover motion, glow, shine, animated border, cursor glow, magnetic movement, sliding text, arrow animation, loading spinner, and disabled state support. It is designed for hero CTAs, pricing CTAs, contact buttons, product pages, waitlists, and high-converting landing pages.
Includes six variants: solid, outline, ghost, glass, gradient, and magnetic. Supports small, medium, large, and custom sizing, plus auto or fill width behavior. Text sizing can be automatic, preset-based, or custom, with minimum and maximum auto text size controls. Includes editable text, href, new-tab behavior, background colors, hover background, border colors, accent color, gradient colors, glow color, glow intensity, shine intensity, animated border toggle, fill effects, cursor glow, and animation intensity. Fill effects include none, left, right, center, and radial. Text animation can be disabled or set to slide on hover. Supports right, down, and external arrow directions, with left or right icon positioning. Custom left and right icon text fields can replace the arrow. Includes loading state with spinner and loading text, disabled state, hover lift, hover scale, press scale, transition duration, uppercase transform, tracking, and optional accessibility label. Uses pointer tracking for cursor glow and magnetic movement, but disables that behavior on touch devices. Respects reduced-motion preferences and Framer static rendering.
