Design · FeaturesCall To Action · Prompting action
CTA (action button)
A CTA is a button or line of text that leads customers to take the next step (e.g., "Book now," "Call us").
Like the "Today's pick" sign by the counter, it tells customers what to do next.
A little more detail
The clearer the button text is about what will happen, the better: "Book a trial class" beats "Learn more."
Too many buttons on one screen make it hard for customers to choose. Make the single most important button stand out and tone down the rest.
On phones, buttons that connect instantly, like call, directions and KakaoTalk inquiry, get tapped especially often.
How do I write the text for a CTA button?
Write CTA text as a verb from the customer's point of view that says what happens when they tap it. That's because, before tapping a button, customers first worry, "Will this charge me right away?" or "Will this start a phone call?"
If anything after the tap might make customers uneasy, add a short note right below the button. A single line like "Just a consultation is fine" or "You'll pay in the next step" eases hesitation.
Shorter button text is better, but don't cut it so far that the meaning disappears. About two or three words that show both "what" and "how" is the right amount.
Match the button text to the words customers actually use. For a hair salon, "Book a cut or perm" reads faster than "Book a treatment," because it's what customers already have in mind.
Swipe the table sideways to see more
| Common text | Improved text | What's better |
|---|---|---|
| Click | See menu · prices | Customers know what they'll see when they tap |
| Apply | Check one-day class spots | Feels like a lower-pressure first step |
| Contact | Chat with us on KakaoTalk | Tells customers how they'll reach you |
| Buy | Add to cart | Makes clear they won't be charged right away |
How do I split buttons into primary and secondary?
The primary button is the one action you most want customers to take, and the secondary button is another path for customers who haven't decided yet. For a hair salon, for example, "Book now" could be the primary button and "See price list" the secondary one.
Give them different weight: make the primary button a solid color and the secondary button an outline or a text link. If both buttons are the same color and size, customers have to stop and think about which one to tap.
Deciding the primary button for each page in advance also shortens design meetings. Just match it to each page's purpose: "Book" on the main page, "Book this treatment" on the price page and "Directions" on the location page.
By business type, the primary button is often "Directions" for a cafe, "Sign up for a class" for a craft studio and "Add to cart" for an online store. Secondary buttons are things like "See menu," "Browse our work" or "Read reviews" for customers who are still deciding.
Where should CTA buttons go, and how big should they be?
Put CTAs right next to where customers make a decision. Typical spots are the first screen, the point where they've finished reading prices or descriptions, and the very end of the page.
They need to be big enough to tap accurately with a finger. WCAG 2.2, the international web accessibility standard, sets a minimum tap area of 24×24 CSS pixels, and important buttons are better made more generous than that. Buttons placed too close together make it easy to hit the wrong one, so watch the spacing as well.
On phones, many sites pin a "Call · Book" button to the bottom of the screen. It's convenient because it's easy for a thumb to reach, but keep it short so it doesn't cover the content.
It also matters that a button looks like a button. If it's just text with no border or background, customers may not realize they can tap it and pass it by.
In what order should I build my CTAs?
Start by deciding what you want customers to do, before thinking about how the button looks. Follow the steps below to settle on the right button for each page.
The smaller your business, the better it is to make the primary button the contact method you can respond to fastest. If you often can't pick up the phone during business hours, for example, make "Message us on KakaoTalk" or "Book now" the primary button instead of "Call us."
Button placement doesn't have to be perfect from the start. Moving buttons after launch based on what actually gets tapped is more accurate than guessing.
- 01List the actions that lead to sales for your business. (Booking, calling, a KakaoTalk inquiry, buying, visiting)
- 02Make the most important one the primary button and one or two others secondary buttons.
- 03Assign one primary button to each page.
- 04Write the button text as a verb from the customer's point of view.
- 05Place buttons on the first screen, where the explanation ends and at the end of the page.
- 06Tap them with your thumb on a phone to check size and spacing.
- 07After launch, keep a record of how often each button is tapped and refine the text and placement.
How do I know if my CTA is working?
Look at how many times a button was tapped and how many of those led to an actual booking or inquiry. If you record button clicks as "events" in your visitor stats tool, you can see which buttons are doing their job.
For a phone button you can only see how many times it was tapped; whether the call went through has to be checked separately. Getting into the habit of asking customers in the shop "How did you hear about us?" makes the numbers easier to interpret.
When you change the text, change only one thing at a time and watch for about 2–4 weeks. If you change several things at once, it's hard to tell what made the difference.
For a small business without many visitors, counts are more useful than rates. Write down how many times a button was tapped each month and how many of those became real bookings, and after a few months you'll see the change.
What are common CTA mistakes?
A common mistake is having too many buttons. When "Book," "Inquire," "Call," "KakaoTalk" and "Instagram" sit in one row at the same size, customers sometimes end up tapping none of them.
Also avoid text like "Click here" or "More" that means nothing without the surrounding context. Customers who use programs that read the screen aloud judge a button by its text alone, which is why web accessibility standards also recommend writing links so their purpose is clear.
The screen after the tap is part of the CTA too. If customers send an inquiry and get no confirmation, they don't know whether it went through, so they send it again or call. Always add a completion message like "We usually reply within a few hours."
What should I ask my web agency about CTAs?
Rather than asking your web agency only for a look, like "make the button big and red," tell them the purpose first, like "Booking matters most on this page." With a clear purpose, the designer can suggest the right size, color and placement.
- Can you explain what you chose as the primary button on each page?
- Do you check button size and spacing separately on phones?
- Will you record button clicks in the visitor stats?
- After launch, how do I request changes to button text or placement?
For example
- Before: "Go" After: "See open slots this week"
- Before: "Contact" After: "Ask about available rental dates"
Just check these
- Each page has one most important button
- The button text alone tells you what will happen
- The size and position are easy to tap with a thumb on a phone
Does my business need it?
Every website where customer actions like bookings, inquiries and purchases turn into sales needs one.
At ISSYMO
We design the first screen and the end of each page so the booking and inquiry buttons are visible right away.
FAQ
Sources
Last updated