<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=826555570791023&amp;ev=PageView&amp;noscript=1">

Inbound Marketing Blog

    The Anatomy of the Perfect CTA Button

    Posted by Inbound Marketing Agents

     This post was submitted by Wes McDowell, creative director at the Deep End Web Design in Chicago

    In the world of internet marketing, if your website isn’t designed with a clear goal, and call-to-action in mind, then it really isn’t even worth the monthly hosting fee.

    Maybe you’re looking to increase online sales, email captures, or successful form submissions. Either way, your site’s CTA is the entire reason you have a website at all.

    A whole lot goes into a conversion. You have to have grabby headlines, persuasive copy, and an overall site structure and sales funnel that makes sense for your goals. But arguably, nothing packs more of a punch than the star of the show itself, the CTA button.

    In this article, we will take a deep dive into five different elements that make for the strongest possible button, allowing you to increase your conversion rates today.


    Color & Contrast

    One of biggest and most obvious barriers between site visitors and a conversion is seeing the button in the first place. Many designers make the mistake of choosing a button color based on aesthetic tastefulness. While there is certainly nothing wrong with being tasteful, in extreme cases, this can result in the button blending in with the rest of the page.

    For example, let’s take a look at the example below:


    Does the CTA immediately jump out at you?  It doesn’t, because it’s the exact same color as the form fields. It seems like in this case, the designer was trying to go for subtlety, which isn’t a great idea when you’re trying to entice more clicks.

    Generally speaking, you want to make your CTA button pop out at the end user. Theoretically, any color can work in the right circumstances. But bright, vivid colors tend to pop the most, especially when the rest of the page consists of a more neutral pallette.

    You will also want to think about the target demographic of your site, because different groups will respond to different colors. If your site is aimed primarily at men aged 45+, you would probably have better luck with a royal blue, than a bright magenta. if your site is for children, you might want to use bold primary colors.

    Take a look at the following color psychology guide to see how different color choices might strengthen your CTA based on your brand’s personality.


    Contrast is Key

    The color you end up selecting should also depend on the other colors on the page. The last thing you would want is for your CTA button to get lost in the mix, so make sure that it stands out.

    Stay away from pairing colors that are next to each other on the color wheel. For example, if your page has a blue background, you would be much better off using an orange button than a green one.

    If your background is dark, try a lighter, brighter button, and if it’s light, try something dark.

    One of my favorite strategies involves designing your page in a subdued, monochromatic color scheme, with a bright contrasting CTA button. The resulting page is easy on the eyes, and allows your audience to read the benefits, and finally be sucked in by the clearly visible and enticing CTA.



    Another huge factor which will determine if a button is seen is its placement on the page. We know it should go in a place of prominence, but exactly where is that?

    Your CTA button must be placed in the path of the user or it simply won’t be seen. In other words, you should place your button where they will look next, after they have been primed to convert.

    The path users take on any given website usually falls into one of two categories, the Z-Pattern, or the F Pattern.

    Z Pattern

    Eyes are usually drawn in the direction shown below on sites that have either lots of graphics, or text with plenty of whitespace. As you can see, it forms a “Z” shape, and you would ideally want to place your CTA button along that path, preferably toward the end of it, where your users’ eye stops.


    Photo Credit: http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html

    F Pattern

    On more text-dense pages, people tend to scan content in an “F” pattern, going from left to right, then down, and left-to-right again. On this type of page, it is preferable to place a CTA button on the right, where the eye stops before dropping down to the next line.


    Photo Credit: http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html

    In a Single Column

    Even if the rest of your page uses multiple columns, or a sidebar, it often helps to place your CTA button below a persuasive headline in a single column with plenty of whitespace around it.

    Look at the example below:


    On  Lyft’s “Join Lyft” landing page, most of the page content is arranged in multiple columns. But when it comes time to present the CTA button, the layout shifts to a single column. This cuts down on the distractions, allowing users to focus on the intended action.

    Make Sure the Button is Obviously Clickable

    Your page looks amazing. Your sales copy is on-point. You’re a landing page guru. But if your CTA button doesn’t look like a button, nobody’s going to click.

    As we talked about earlier, your CTA button isn’t the time to go subtle. Remember what a trend ghost buttons were last year? Simple, elegant, with a hairline stroke, they really do look nice. The trouble is, they look more like a styling choice for text rather than a button. And just like that, they’re the ghosts of UX past.


    So what can we learn from that mistake? Make your buttons look like they are meant to be clicked. They need to be solidly filled-in. A subtle drop shadow can hit the idea home even further. And adding hover effects is crucial. A mouse-over should provide your users with visual feedback that says “click me.”

    Rounded Rectangles For-the-Win

    While your CTA button shouldn’t be a place for subtlety, it also isn’t the place to reinvent the wheel.

    Buttons should be rectangular to be read as buttons. It’s a time-honored web convention, so let’s not throw users off the scent with cute little shapes. Circles, ovals, and ducks aren’t traditionally buttons, and will only confuse visitors.

    Paul Olyslager says rectangles with rounded corners work best. “Rounded corners point inward and draw the attention to the inside (content) of the button. A square edge on the opposite, points outward and draws the attention away from its object.”

    Strong Copy

    Now that we have the container and position picked out, it’s time to craft the perfect CTA copy. First, you want to write to your intended audience. Use words that will speak to them, and try to speak the way they speak when you can.

    It’s always best to avoid anything that sounds like a cliché or that has been used a million times before. Here are a few tips to keep in mind:

    • Make it dynamic. Use action words whenever possible. For example, “explore” is a much more clickable word than “see.”
    • Emphasize what they’re getting, not what they’re giving up. Words like “buy” reinforce that they have to spend money. Words like “schedule” sound like a hassle. Words like “get,” “find,” or “play” sound much more appealing from a psychological perspective.
    • Make it specific. Your copy should offer a clue as to what happens when they click. Generic CTAs such as “Click Here” could mean anything, and are not nearly as successful as something more targeted, such as “Show My Results.”
    • Keep it short. 2-4 words max should make it clear.

    Final Thoughts

    Your CTA button is one of the most important elements on your entire website. It needs to not only be highly visible, but extremely enticing as well. While some of the burden can be shifted to the supporting copy and other content, the button is the face of your CTA.

    If you use the tips outlined here in a logical way that works for your website, you can expect to see an increase in conversions almost overnight. Continuing to tweak copy, color and size can also be incredibly helpful until you reach peak performance.

    Read More: 9 Calls-to-Action That Can Boost Lead Generation


    Author Bio


    Wes McDowell is the creative director for The Deep End Web Design in Chicago. Specializing in user experience, web design and internet marketing, Wes loves to share his knowledge through blogging, as well as through his podcast, Deeply Graphic.

    Topics: Design