Based on 3 Ways to Optimize Your Website CTAs for Higher Conversion by Guy Yalif.
Business benefits
Make the main CTA visually stand out by using a high-contrast design.
Make sure the main CTA stands out enough so the visitor is drawn to it, even when casually glancing at the page. You can also:
- Place the main CTA in two different spots above the fold, with varying contrasts against the background.
- Make other CTAs less prominent to avoid distraction, like log in and sign up.
- Use a sticky CTA as the user scrolls, still keeping a contrasting color.
- Ensure that no other CTAs on the page distract from the main CTA.
Example of using a contrasting CTA: Segment
Segment does a great job at making their CTA stand out with colors that pop, in prime locations on the page.
Keep the main CTA sticky as the visitor scrolls down the page.
A sticky CTA remains top of mind for the visitor at all times and is easily accessible when they’re ready to act. You may choose to have the CTA float, like a widget, or be part of the navigation bar.
Example of using a sticky CTA: Clearbit
Clearbit uses a sticky Get Started button, and also went a step further; when a visitor clicks the button, the site auto-scrolls them to the Get Started form at the bottom of their homepage.
Repeat the main CTA throughout the page, such as in every other section or at the top and bottom.
Repeating the CTA serves as a reminder to the user as they scroll and read other content. When the right content resonates with them, the CTA is right there, increasing the chances of a conversion.
Other ways to treat repeat CTAs:
- Make them identical in appearance and verbiage.
- Feature a unique appearance but the same verbiage.
- Design each repeat CTA with both a unique appearance and verbiage.
Example of repeating the main CTA on a page: Asana
Asana does a great job of repeating their main CTA throughout the page.
The main objective of this page is to drive visitors to Get Started by filling out a form. Two main CTAs above the fold reinforce this objective and make it obvious to new users, the nav bar CTA remains sticky upon scroll, keeping the objective present at all times and the CTA appears in multiple sections of the home page as a reminder