There's no button at the top of your page

Applies to

every page

Typical severity

high

Effect on conversions

medium

Effort to fix

Quick to fix

What to look for

No button-styled element in the first 900px (desktop) or 844px (mobile).

Why it matters

Some visitors arrive already knowing what they want. They want to book, call, get a quote or buy. If the first screen gives them nothing to click, they have to scroll and search. Some won't bother.

A clear button in the first screen also tells everyone else what the page is for and what the next step is, even if they keep reading first. It doesn't need to be pushy. It just needs to be there and look like a button.

What good looks like

We look for at least one button-styled element with readable text in the first screen, on both desktop and mobile. On desktop that is the first 900px of the page. On mobile, at a 390px wide viewport, it is the first 844px. A plain text link doesn't count. It needs to look like a button. Each viewport is checked separately, so a page can pass on desktop and fail on mobile.

How to check it yourself

1. Open the page on a laptop or desktop and don't scroll. Is there a clear button telling you what to do next?
2. Now open it on a phone, or in Chrome dev tools with the device toolbar at 390 by 844. Again, don't scroll.
3. Check the button actually looks like a button: a filled or outlined shape with a short action label.
4. Watch for cookie banners or pop-ups covering the first screen on mobile. They can hide the button you do have.

How to fix it

• Pick one main action for the page, such as Get a quote, Book a call or Shop the range.
• Put it in the hero section, close to the main heading, styled as a solid button.
• On mobile, reduce what sits above it. Large hero images, tall headers and long intro text often push the button below the first screen.
• Use a label that says what happens next. Get a free quote is clearer than Submit or Learn more.
• A secondary action is fine, but style it less strongly so the main one stands out.

<section class="hero">
  <h1>Commercial cleaning for offices in Bristol</h1>
  <p>Fully insured, flexible contracts, no lock-in.</p>
  <a class="button" href="/quote">Get a free quote</a>
</section>

<style>
  .button {
    display: inline-block;
    padding: 14px 24px;
    background: #0b5fff;
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
  }
</style>

Common mistakes

• A full-screen hero image on mobile that pushes all content down.
• Relying on the menu or a phone icon in the header as the only action.
• Several equally loud buttons competing with each other.
• Vague labels such as Click here or Find out more.

AgoraScan measures this automatically on every page it audits, on desktop and mobile.

Based on

• Homepage usability research