CTA
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
Live Demo
Actually clickableStart tidying up your library
Scan, find duplicates, and reclaim space in one tap.
No credit card · Photos stay on your device
What you just saw:The full-width "Start free trial" on a sign-up page, the highlighted "Buy now" in the top-right of a landing page — they stand out because they are the only thing on the page driving conversion.
What it actually is
A CTA is not a button that looks different; it is a role: the single primary action of the current page. You can have five secondary buttons, but only one CTA. The test is simple — if you removed it, could the user still complete the task?
Anatomy · What it's made of
Container容器
Larger padding, usually full-width or noticeably wider
Value Label价值文案
States the benefit, not the feature: "Start free" beats "Sign up"
Visual Weight视觉权重
The only solid, highlighted button on the page
Optional Hint辅助说明
A line of small text below the button that reduces hesitation
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The page has one clear action you most want the user to complete | Yes |
| Landing pages, sign-up pages, and empty states | Yes |
| You need visual weight to guide the next step | Yes |
| Several equally important primary actions coexist on the page | No |
Making every button a CTA means there is no CTA — once visual weight is averaged out, the focus disappears.
Forcing a CTA into a high-frequency workspace interface is just noise.
Similar Patterns
Don't mix these upCTACurrent
行动号召按钮
The single most important button on the page — it is the one thing you want the user to do next.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
In one line:The single most important button on the page — it is the one thing you want the user to do next.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
FAB
浮动操作按钮
The round button that floats in the corner of the screen, usually carrying the "create" action.
Empty State
空状态
The block you show when a list is completely empty — it should explain why it is empty and what to do next.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a full-width primary CTA to the sign-up page reading "Start free trial", dark and solid, with a line of small text underneath: "No credit card required".
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a button for the user to click.
Say this instead
Add the single primary CTA to the sign-up page: full-width, dark solid, labeled "Start free trial" (benefit, not feature), with 13px gray text "No credit card required" below it.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.