Call to Action
A design element — usually a button or link — that prompts the user to take a specific desired action.
Plain English
A call to action (CTA) is the single most important clickable element on any screen. It is the moment where design becomes business. Good CTAs are specific ("Start free trial"), visible (maximum visual weight), singular (one primary CTA per section), and placed at the natural end of the user's attention path. The two most common mistakes: vague copy ("Learn more" vs. "Start your 14-day trial") and multiple competing CTAs that paralyse decision.
Technical
Primary CTA: maximum visual weight — filled accent background, white text, adequate padding, primary position in the layout. CTA copy: verb + specific outcome. Single most important action per section (Hick's Law: more choices = more time to decide). Placement: above the fold on hero sections, at the natural end of explanatory content, inline with the value proposition it refers to. Secondary CTA: always lower visual weight (outlined or ghost style). CTA size: comfortable tap target (44px+ height on mobile).
Live Demo
3 equal-weight buttons → user confusion
1 primary + 1 ghost → clear next action
Design better products.
The UI/UX playbook used by 10,000+ designers.
One primary CTA per view. Every additional button reduces conversion by ~50%.
Usage
✓ Good usage
A hero section with "Start your 14-day free trial →" as the primary CTA and "See how it works" as a smaller secondary link — one clear action, one optional.
✗ Bad usage
Three filled blue buttons side by side: "Sign up", "Learn more", "Watch demo" — equal weight creates paralysis, no clear primary action.
Recommended values
- Copy: Verb + specific outcome ("Start free trial", "Download the guide")
- Visual weight: highest on the page (primary CTA)
- Padding: 12-16px vertical, 24-32px horizontal
- One primary CTA per screen section
- Secondary CTA: always visually subordinate
- Mobile: full-width for primary CTAs in forms and heroes
Common mistakes
- Vague copy: "Learn more", "Click here", "Submit" — be specific about the outcome.
- Multiple primary-weight CTAs competing on the same page section.
- CTA below the fold with no above-the-fold signal pointing to it.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
One primary CTA per section: filled accent, specific verb ("Get started free"). Secondary CTA: ghost or outlined, lower visual weight. Hero CTA: 14px/600 weight, 14px vertical / 28px horizontal padding. Mobile: full-width. Copy: always "Verb + specific outcome", never "Learn more" or "Click here".