Buttons and calls to action that people click

Buttons and calls to action that people click

Membergate Support -

Almost everything that matters on a membership site happens when someone presses a button. Joining, starting a trial, registering for an event, booking a call, moving to the next lesson: each is a click on a small rectangle with a few words on it. When those buttons are hard to spot, vaguely worded or scattered across the page in competition with each other, people hesitate, and hesitation is where sign-ups and momentum quietly leak away.

Good buttons are not about clever colors or tricks. They are about making the next step obvious, telling people honestly what will happen and removing the small doubts that stop them. Here is how to get there.

Make buttons look like buttons

A call to action only works if people recognize it as something to press. Flat text in a colored box, a ghostly outline that fades into the background or a heading that happens to be clickable all make people pause. A clear button usually has:

  • A solid fill in your action color, with a label that contrasts strongly against it
  • Enough padding around the words that it reads as an object, not a highlighted phrase
  • A consistent shape and style everywhere on the site
  • A visible change when hovered, pressed or reached with the keyboard

There is a useful distinction between buttons and links. Links take people somewhere to read; buttons make something happen, such as joining, saving or registering. Keeping to that convention helps visitors predict what each click will do. The contrast guidance in color and contrast for readable pages applies to buttons too: the label must be readable against the fill, and the button itself must stand out from the page.

Give each screen one main action

When everything is a bright button, nothing stands out. Decide what the most important action on each page is, and give only that action the full button treatment. Then set up a simple hierarchy:

  1. Primary: solid, in your action color, for the one thing you most want people to do.
  2. Secondary: outlined or muted, for a reasonable alternative such as “See a sample lesson.”
  3. Tertiary: a plain text link for everything else, such as “Compare all plans.”

A sales page might repeat the same primary button several times as people scroll, and that is fine. What causes trouble is three different primary buttons pulling in three directions within one screen.

Write labels that say what happens next

The words on the button are the last thing people read before committing. Vague labels such as “Submit,” “Click here” and “Learn more” force visitors to guess. Specific labels answer the question “What happens if I press this?” A few principles:

  • Start with a verb that describes the action: join, start, register, download, book.
  • Name what they get or where they are going: “Start my free week,” “Register for the workshop.”
  • Keep it to two to five words where possible.
  • Match the label to the result. If “Get started” leads to a payment form, visitors feel misled; “Choose your plan” would be honest.
  • Try first-person wording, such as “Send me the guide,” which often reads naturally, but choose one style and use it consistently.

The same thinking applies to buttons in your emails; calls to action in email covers how to write and place those.

Add a line of reassurance

Just below or beside an important button, a short line can answer the doubt that is holding someone back. It is often the most effective text on the page, because it sits exactly where the decision is made:

  • “Cancel any time from your account page”
  • “No card needed for the free week”
  • “Billed monthly, plus any applicable tax”
  • “You'll get the recording if you can't make it live”

Keep it true and specific. One honest line of reassurance does more than a row of badges.

Place buttons where decisions happen

Put the button after the information people need in order to decide, not before it. On a short page, one button near the top and another at the end is usually enough. On a long sales page, repeat it after each major section so nobody has to scroll back up to act.

Size matters on phones. Buttons should be comfortably large for a thumb, with space between neighboring buttons so nobody presses the wrong one. Full-width buttons often work well on small screens.

Finally, think about states. When someone presses a button, it should respond immediately, showing that something is happening. If a button is unavailable, for example because a required field is empty, explain why nearby instead of leaving a gray button with no explanation.

A worked example: an online choir for beginners

Rafael runs an online choir for adults who have never sung in a group. Here are his buttons before and after a review:

Before: “Submit” on the trial sign-up form. “Learn more” under each rehearsal description. “Go” on the lesson pages. Three equally bright buttons on the home page: “Join,” “Newsletter” and “Contact.”

After: “Start my free rehearsal week,” with “No card needed. Sing along from home” beneath it. “See this term's songs” under each rehearsal description. “Next: Warming up your voice” on the lesson pages. One primary “Start my free week” button on the home page, with the newsletter and contact options moved to quieter text links.

Every label now tells people exactly what they will get, and the home page asks for one thing instead of three.

Review your buttons this week

  1. List every button on your home page, sales page, sign-up form and lesson pages.
  2. Rewrite any label that says Submit, Click here, Go or Learn more.
  3. Check that each screen has only one primary button.
  4. Add a reassurance line under your main sign-up button.
  5. Test each button on a phone for size, spacing and a visible response when pressed.
  6. Make sure every label matches what actually happens after the click.

0 Comments

Comments are reviewed before they appear.