Skip to content

component

PremiumButton

By Spyridon Merkouris

Details

Summary

Premium animated CTA button

Description

What it does 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. Features 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.

Introduction

Premium animated CTA button

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400151678/148/228/309/79/15
  • All · #4804