The humble button is the most important pixel on your website. Every conversion — every sale, every lead, every signup — passes through one. Get it right and the rest of your site works harder. Get it wrong and you leave money on the table every single day.
Here's what professional designers actually know about building CTAs that convert, including the common mistakes that sabotage most small business sites.
Rule 1: the button has to look like a button
This seems obvious until you start looking at how many real business websites have "ghost buttons" — outlined boxes with thin borders and transparent backgrounds — as their primary CTA. These look minimalist and elegant in design mockups. They convert terribly.
Real buttons have: a solid filled background, enough padding to feel substantial, clearly readable text, and an obviously clickable shape. If a user has to squint to figure out whether something is clickable, they'll assume it isn't and move on.
Rule 2: contrast is more important than brand color
Your primary CTA needs to pop off the page. That means it should use the color that has the strongest contrast against your background — not necessarily your main brand color. If your brand color is a soft blue and your background is a soft blue, using brand-blue buttons means they blend in and disappear.
A high-contrast accent color (that's part of your overall palette) works better than "on-brand" buttons that nobody can see.
Rule 3: the button label should say what happens next
"Submit" is the laziest button label in web design. It tells the user nothing. Better labels tell the user exactly what they're about to do:
- "Send My Message" > "Submit"
- "Get My Free Quote" > "Contact Us"
- "Start My Project" > "Get Started"
- "Download the Checklist" > "Download"
- "Book My Call" > "Schedule"
The more specific and first-person, the better. "My" and "Your" outperform generic labels by meaningful margins.
Rule 4: one primary CTA per page
Every page should have one main thing you want the visitor to do. That one action gets the loud, high-contrast, full-color button. Secondary actions get ghost buttons or text links. If you have three equally-loud buttons on the same page, the user can't tell which one is the "real" one and tends to pick none of them.
Think of your page like a stage. One spotlight, one main performer. The rest are supporting cast.
Rule 5: place the CTA where the decision happens
Your main CTA should appear in the hero section (for impatient visitors who are already sold), at the end of the main content (for visitors who needed convincing), and in the footer (for visitors who scrolled past and want a backup). Three placements, same button, same label.
Don't hide your main CTA in a tiny link in the navigation. Don't force visitors to scroll back up to find it. Make it unavoidable.
Rule 6: hover states actually matter
When a user hovers over a real button, it should do something — change color, slightly lift, add a subtle shadow, whatever. This confirms "yes, this is clickable" before they click. Dead-static buttons read as decoration.
On mobile there's no hover, so use the :active state instead — a quick visual feedback when the button is tapped.
Rule 7: make buttons big enough to tap
Apple's Human Interface Guidelines recommend a minimum tap target of 44×44 pixels. That's the smallest size a finger can reliably hit on a mobile screen. Tiny text links and cramped buttons get misstapped constantly, and misstapped users get frustrated and leave.
Rule 8: add a supporting line under the button
A small line of supporting text right under the button can dramatically increase clicks. "Free consultation, no obligation." "30-day money back guarantee." "Takes less than 2 minutes." Each of these addresses a specific hesitation and removes friction.
Rule 9: test, don't guess
If you have any traffic at all, A/B test your button text and color. Swap "Get Started" for "Start My Project" and see what happens. Swap the orange CTA for a purple one. Small changes often produce surprisingly large differences in conversion rate.
The six CTA mistakes we see most often
- Ghost buttons as the primary CTA
- Generic labels like "Submit" or "Click Here"
- Multiple competing primary buttons on the same page
- Buttons that don't change on hover (dead-static)
- Tiny buttons on mobile that are impossible to tap
- Buttons hidden below the fold on long landing pages
Any one of these will reduce conversion. Combinations of them will cut it in half or more.
Want us to audit yours?
CTA audits are part of every site we build, and we're happy to take a quick look at your current site for free. Send us your URL and we'll tell you exactly what's wrong with your buttons — and what to fix first.