Your website can have brilliant design and compelling copy, but if your call-to-action buttons don’t work properly, you’re losing conversions. It’s that simple.
I’ve reviewed hundreds of Sydney business websites where beautiful designs were undermined by CTAs that say “Click Here” or use colours that blend into the background. These businesses spent $5,000 to $15,000 on their websites but lose 30% to 50% of potential conversions because their buttons don’t actually encourage action.
A well-designed CTA button can double or triple your conversion rate. A poorly designed one gets ignored completely. The difference comes down to specific, testable elements that most businesses get wrong.
Here’s what actually works when creating CTA buttons that convert.
Button Copy That Tells People Exactly What Happens
The biggest mistake with CTA buttons is vague, generic copy. “Submit,” “Click Here,” and “Learn More” tell visitors nothing useful. They create uncertainty, and uncertainty kills conversions.
Your button copy should answer two questions immediately: what will happen when I click, and what’s in it for me?
Compare these examples:
Weak: “Submit”
Better: “Get Your Free Quote”
Weak: “Learn More”
Better: “Download Our 2026 Price Guide”
Weak: “Click Here”
Better: “Book Your Free Consultation”
The stronger versions work because they’re specific. They tell you exactly what you’ll receive when you click. No guessing required.
First-person copy often performs even better. Instead of “Get Your Free Quote,” try “Get My Free Quote.” Research from ContentVerve showed first-person CTAs can outperform second-person by 90% in some contexts. Why? Because “my” creates ownership and feels self-directed, while “your” feels like someone else is telling you what to do.
For a Mosman accounting firm, we changed “Contact Us” to “Book My Free Consultation” and saw their form completions increase by 47% in the first month. Same page, same offer, just better button copy.
Action verbs matter too. Start with words like “Get,” “Download,” “Start,” “Book,” “Claim,” or “Join.” These create momentum and imply benefits. Words like “Submit” or “Enter” sound like work rather than value.
Keep your button copy short. Two to five words is ideal. If you need more than seven words, you’re probably trying to explain too much on the button itself. Save the explanation for surrounding text.
Size and Placement: Making Your Buttons Impossible to Miss
Your CTA button needs to be large enough to notice immediately but not so oversized it looks aggressive or amateur. There are specific sizes that work consistently across devices.
For desktop displays, your primary CTA should be at least 44 pixels tall, with 48 to 56 pixels being optimal. The minimum width should be 120 pixels, though wider is better if your copy needs it. Include 12 to 20 pixels of horizontal padding and 12 to 16 pixels of vertical padding.
On mobile, your requirements change. Apple and Google both recommend a minimum touch target of 48 pixels. For CTAs specifically, aim for 48 to 56 pixels tall and either full-width or at least 200 pixels wide. Use 16 to 24 pixels of horizontal padding and 14 to 18 pixels of vertical padding.
We tested button sizes on 150 mobile devices for a Sydney e-commerce client. Buttons under 48 pixels tall had a 23% higher mis-tap rate. Buttons at 52 pixels tall performed best, with the lowest error rate and a 4.8% conversion rate compared to 3.6% for smaller buttons.
Placement matters just as much as size. Your primary CTA should appear:
- Above the fold on landing pages (visible without scrolling)
- After your value proposition on homepage
- At the end of persuasive content sections
- After testimonials or trust signals
- At the conclusion of relevant blog posts
For longer pages, repeat your CTA every 2 to 3 scroll sections. Don’t make people hunt for the next step. One legal services site increased conversions by 31% simply by adding a second CTA button halfway down their services page. People who didn’t convert at the top often converted after reading more details.
White space around your button is critical. Your CTA needs at least 30 to 40 pixels of clear space on all sides. Buttons crammed between other elements get less attention and fewer clicks. White space acts as a visual signal that says “this is important.”
Colour and Contrast: Making Your CTA Stand Out
Your button colour needs to do two things: stand out from everything else on the page and meet accessibility standards so everyone can use it.
The WCAG 2.1 AA standard (which Australian websites should follow) requires a minimum contrast ratio of 4.5:1 between button text and button background. For larger text (18pt bold or 24pt regular), the minimum is 3:1. These aren’t suggestions if you want your site accessible to people with vision impairments.
But don’t aim for minimum standards. Aim for obvious visibility. A contrast ratio of 7:1 or higher is ideal. This makes your button readable in bright sunlight, on older monitors, and for people with colour vision deficiencies.
Test your contrast at WebAIM’s Contrast Checker. Enter your button’s background colour and text colour. If it doesn’t pass AA standards, change it until it does.
Button colour should also contrast with your page background. If your page has a white background, a bright orange (#FF6600) or blue (#0066FF) button will stand out. If your background is dark, a bright yellow or white button works better.
We ran split tests with different button colours for a Sydney health clinic. Their original green button (similar to their logo) converted at 3.2%. An orange button converted at 4.7%. A red button hit 5.1%. The red button had the highest contrast ratio (8.2:1) against their light blue background. Higher contrast consistently won.
The famous HubSpot red versus green button test showed red winning by 21%. But the lesson wasn’t “red buttons convert better.” It was “buttons that contrast with their surroundings convert better.” HubSpot’s page used green accents throughout, so red stood out. If they’d used red accents, green probably would have won.
Avoid these colour combinations:
- Red text on green backgrounds (problematic for colour blindness)
- Blue text on black backgrounds (poor contrast)
- Yellow text on white backgrounds (essentially invisible)
- Light grey text on slightly darker grey (fashionable but unusable)
Your button colour doesn’t need to match your brand colours perfectly. In fact, it often shouldn’t. If your brand uses subtle, sophisticated colours, your CTA button should be bolder and brighter. Its job is to convert, not to blend in.
Primary vs Secondary CTAs: Creating Clear Hierarchy
Not everyone who visits your site is ready for your primary action. Some people want to explore first, compare options, or take a smaller step before committing.
That’s where secondary CTAs come in.
Your primary CTA is your main conversion goal. For most businesses, this is something like “Book a Consultation,” “Get a Quote,” or “Start Your Free Trial.” It should be the most visually prominent button on the page.
Your secondary CTA offers an alternative for people who aren’t ready yet. This might be “View Our Work,” “Download Our Guide,” or “See Pricing.” It should be visible but less dominant than your primary CTA.
Here’s how to style them differently:
Primary CTA:
- Solid fill colour (your highest-contrast option)
- White or very light text
- Larger size (48 to 56 pixels tall on desktop)
- Positioned first or above secondary options
Secondary CTA:
- Outlined style or subtle fill (lower contrast)
- Darker text colour that matches your primary CTA colour
- Slightly smaller size (44 to 48 pixels tall)
- Positioned second or below primary CTA
A Sydney property management company tested this approach. They kept “Request a Property Appraisal” as their primary CTA (solid orange button) but added “View Rental Properties” as a secondary CTA (outlined orange button). Their overall conversions increased by 22% because people who weren’t ready to request an appraisal could still take a meaningful action.
Never put two primary-style CTAs next to each other. This creates decision paralysis. Make one clearly more important. If both actions are equally valuable to your business, test them separately to see which your audience prefers, then make that one primary.
Mobile CTA Optimization: Touch Targets and Thumb Zones
More than 65% of Australian web traffic now comes from mobile devices. If your CTAs don’t work perfectly on phones, you’re losing the majority of potential conversions.
Mobile CTAs need different treatment than desktop versions. The screen is smaller, interaction is touch-based, and people often browse with one hand while doing something else.
Make your button wide enough to tap easily. Full-width buttons (90 to 95% of screen width) work best for primary actions on mobile. They’re impossible to miss and easy to hit. Narrow buttons that float in the middle of the screen create unnecessary difficulty.
Position buttons where thumbs naturally reach. Most people hold their phone in one hand and use their thumb to browse. The bottom third of the screen is the easiest area to reach. The top corners are hardest.
We tracked thumb heat maps for 200 users on mobile devices. The “thumb zone” (bottom centre of the screen) had 3.2 times more interaction than the top of the screen. CTAs placed at the bottom converted 41% better than identical CTAs at the top.
Sticky (fixed position) CTAs work brilliantly on mobile. A button that stays visible as people scroll means they can take action the moment they’re ready, without scrolling back up. This single change increased mobile conversions by 28% to 35% across five different client sites.
Button spacing is even more critical on mobile. If two buttons are close together, people will accidentally tap the wrong one. Maintain at least 12 to 16 pixels between any two interactive elements. Better yet, stack buttons vertically instead of placing them side by side.
Test your CTAs on actual phones, not just browser developer tools. Real devices reveal problems that emulators miss. Text that looks fine in Chrome’s mobile view might be too small on an actual iPhone SE. A button that seems tappable in Safari’s responsive mode might be frustratingly tiny on a real Samsung Galaxy.
Don’t make people zoom to read your button text. If your button copy requires zooming, your font size is too small. Use at least 16 pixels for mobile button text, with 18 to 20 pixels being better.
Testing Your CTAs: What to Measure and How
You can’t know what works without testing. Your instincts about button design are probably wrong, or at least incomplete. What you think looks good might not convert as well as something less attractive.
The only way to know is to test with real users.
Start with A/B testing your button copy. Keep everything else the same (colour, size, position) and change only the words. Run the test until you have at least 100 conversions per variation, or 2 to 4 weeks of data, whichever comes first.
For a Chatswood professional services firm, we tested five different button copies:
- “Contact Us” – 2.8% conversion rate (baseline)
- “Get Started” – 3.1% conversion rate (11% improvement)
- “Book a Meeting” – 4.2% conversion rate (50% improvement)
- “Schedule My Consultation” – 4.9% conversion rate (75% improvement)
- “Claim My Free Consultation” – 4.7% conversion rate (68% improvement)
The specific, first-person copy won by a huge margin. “Schedule My Consultation” performed 75% better than their original “Contact Us” button.
Next, test button colour. This often has the biggest visual impact. Try your current colour against 2 to 3 high-contrast alternatives. Track which gets more clicks and which converts better (these aren’t always the same).
A Sydney e-commerce store tested three CTA button colours on their product pages:
- Blue (their brand colour): 2.3% click-through rate
- Green: 2.8% CTR (22% increase)
- Orange: 3.4% CTR (48% increase)
The orange button won because it contrasted sharply with their blue and white colour scheme. Switching permanently to orange buttons increased their add-to-cart rate by 41%.
Then test position. Try placing your CTA in different locations on the page. Above the fold versus below the fold. Before testimonials versus after testimonials. Beginning of content versus end of content.
Finally, test size. Create versions that are 20% larger and 20% smaller than your current button. Measure the impact on both desktop and mobile separately.
Track these specific metrics:
- Click-through rate (percentage of page visitors who click your button)
- Conversion rate (percentage who complete the desired action)
- Device-specific performance (mobile versus desktop versus tablet)
- Position in user journey (first visit versus returning visitor)
Use tools like Google Analytics, Hotjar, or Microsoft Clarity to see how people interact with your buttons. Heat maps show where people click. Scroll maps show how far people read before they see your CTA. Session recordings reveal confusion or hesitation.
One unexpected finding: buttons that converted best weren’t always the prettiest. A Sydney retailer’s elegant, minimalist button converted at 3.4%. A bolder, larger, slightly “excessive” button hit 5.2%. Sometimes what designers prefer isn’t what converts best.
Common CTA Mistakes That Kill Conversions
After reviewing hundreds of websites, I see the same CTA mistakes repeatedly. Here are the ones that damage conversions most:
Using too many CTAs on one page. More isn’t better. Every additional CTA dilutes attention and creates decision fatigue. Stick to one primary CTA and one optional secondary CTA per page. Three is the absolute maximum.
Making CTAs look like ads. Years of banner blindness have trained people to ignore anything that looks like an advertisement. Avoid flashy animations, borders that look like ad frames, and positions (like top-right corners) where ads typically appear.
Burying the CTA in text. If your button is surrounded by paragraphs with no white space, people won’t notice it. Create visual separation. Put space above and below your CTA.
Using passive language. “Submit Form” or “Send Inquiry” sound like work. “Get Your Free Quote” or “Download Now” sound like benefits. Frame your CTA as a gain, not a task.
Forgetting about mobile entirely. A button that works on desktop might be unusable on mobile. Always test on actual devices. A Sydney restaurant’s “Make a Booking” button was perfectly sized on desktop but only 32 pixels tall on mobile, leading to a 54% higher mis-tap rate.
Not explaining what happens next. If clicking your button leads to a 10-page form, people need to know that upfront. Surprises after clicking reduce trust and completion rates. Add micro-copy near your button: “Takes 2 minutes” or “No credit card required.”
Using buttons that don’t look clickable. Flat design is fine, but your button needs visual affordance. A subtle shadow, border, or gradient helps signal “this is interactive.” Completely flat rectangles sometimes get mistaken for headings or images.
Visual Design Details That Matter
Small design details affect perceived clickability and trust.
Slightly rounded corners (4 to 8 pixels border radius) make buttons feel modern and approachable. Sharp corners (0 pixels) feel more formal and traditional. Heavily rounded corners (20 pixels or more) can feel playful or childish.
Choose based on your brand personality:
- Financial or legal: 2 to 4 pixels radius
- Most businesses: 4 to 8 pixels radius
- Creative or casual: 8 to 12 pixels radius
- Apps or SaaS: 6 to 10 pixels radius
A subtle shadow makes buttons feel clickable by creating depth. Too much shadow looks outdated. Modern approach: subtle shadow on hover or focus, minimal or no shadow by default.
Your button must visually respond to interaction. When someone hovers over it (desktop) or taps it (mobile), something should change:
- Colour slightly darker or lighter
- Shadow increases (lift effect)
- Slight scale increase (1.02 to 1.05)
- Underline appears on text
This feedback confirms the button is clickable and responsive. Buttons that don’t respond to hover feel broken.
Your CTA Audit Checklist
Review your current CTAs against these criteria:
- Button copy: Specific, action-oriented, 2 to 5 words
- Size: Minimum 44 pixels tall desktop, 48 pixels mobile
- Contrast: 4.5:1 minimum with background
- Colour: Distinct from other page elements
- Placement: After value proposition, repeated on long pages
- Hover state: Visual feedback on interaction
- Mobile optimized: Full width or large enough to tap easily
- Hierarchy: Primary CTA clearly dominant over secondary options
- Text contrast: 4.5:1 ratio between button text and button background
If your CTAs fail more than three of these criteria, you’re losing conversions.
Start With Your Highest-Traffic Page
Don’t try to optimize every button at once. Start with your homepage or highest-traffic landing page.
Audit the current CTA. Fix obvious problems (size, contrast, copy). Measure current performance. Make one improvement. Test for two weeks. Measure again.
Use what you learn to improve CTAs across the rest of your site.
Here’s what makes CTA optimization so valuable: small improvements compound across your entire site. If your homepage CTA improves from 2% to 3% conversion, that’s a 50% increase. Make similar improvements to your service pages, product pages, and landing pages, and the total impact multiplies.
A website getting 5,000 monthly visitors with an average 2% CTA click rate generates 100 clicks. Improve that to 3.5% across the site and you’re getting 175 clicks. That’s 75 additional leads or sales opportunities per month, 900 per year.
If you convert 25% of those leads at $2,000 average value, that’s $450,000 in additional annual revenue. From better button design.
Need Help Optimizing Your Website Conversions?
Sites By Design builds websites for Sydney businesses with CTAs designed to convert. We handle button copy, design, placement, and A/B testing to maximize the return on your website investment.
Contact us today for a free CTA audit with specific recommendations to improve your conversion rates.
