Best Practices for Button Design and Placement

Buttons seem like the simplest thing on a screen. They’re just rectangles you click. But anyone who’s ever stared at a page with two equally bold buttons, or tapped the wrong one on a phone and lost a half-filled form, knows that small design choices create big friction. Baymard Research found that 48% of ecommerce sites neglect at least one basic element — unique styling, consistent placement, or a clear label — on their primary button. That’s nearly half of all checkout flows making the most important click harder than it needs to be.

UX Design Conversion Optimization Accessibility

Heads up — this post may include links to things I use or like, and I might earn a little something if you shop through them. Doesn’t cost you anything extra, and I only mention stuff I’d actually recommend.

Where Buttons Live and Why It Matters

Button placement isn’t a guessing game. Nielsen Norman Group research shows that users make decisions in milliseconds when they land on a screen. If the button isn’t where the eye naturally goes, the user has to stop and search — and that pause is often enough to abandon the task entirely.

Eye-tracking studies reveal two dominant scanning patterns. On content-heavy pages, people read in an F-pattern: across the top, then down the left side in shorter horizontal sweeps. That means buttons placed along the left edge or directly below a content block catch the eye naturally. On simpler pages like landing pages, the Z-pattern takes over: top-left to top-right, then diagonally down to bottom-left, then across to bottom-right. A primary CTA at the bottom-right lands exactly where the eye is already traveling.

There’s also the principle of proximity — a concept from Gestalt psychology that NN Group explains in detail. Buttons should sit close to the content they relate to. A submit button directly below the last form field, not somewhere off to the side or buried at the bottom of the page. A delete icon inside the row it affects, not floating ambiguously nearby. When spacing is intentional, buttons feel like part of the conversation. When it’s off, they feel like an afterthought.

Consistency matters too. If the “Save” button lives in the bottom-right corner of every form on your site, users stop thinking about where to find it. They just click. Move it around, and you force them to re-learn the interface each time.

The One-Button Rule (and When to Break It)

The most common mistake I see is treating all buttons as equals. Multiple solid, brightly colored buttons on the same screen creates a situation where the user has to stop and decide which one matters. That hesitation kills flow.

The fix is a clear hierarchy with three levels. Primary buttons get the strongest visual weight — solid fill, high contrast, larger size. Secondary buttons step back with an outline or lighter treatment. Tertiary actions can be text links or ghost buttons — minimal, but still there if needed. Material Design guidelines recommend placing the primary action on the right and the secondary on the left, which follows the natural left-to-right reading pattern. The primary action lands last, so it feels like the destination.

One primary action per screen is the rule of thumb, but there are exceptions. A sticky CTA in the navigation that mirrors the main button on the page is fine — it just gives a persistent option without adding a second competing action. Similarly, a pricing page might have a “Start free trial” on the recommended plan and a “Talk to sales” on the enterprise tier, but each plan still has only one clear primary action.

Destructive actions — delete, remove, cancel subscription — need special treatment. They should look different from standard buttons. A red fill or outline, plus a confirmation dialog, prevents irreversible mistakes. The goal is to slow the user down, not add friction everywhere, but definitely where the stakes are high.

Labels That Do Actual Work

“Submit” tells the user nothing about what happens next. “Click here” describes the action, not the outcome. “Learn more” is so overused it’s basically invisible. Bad button copy is one of the easiest fixes you can make, and it has an outsized impact on conversion.

A good button label follows a simple formula: action verb + outcome + optional qualifier. “Start free trial” — start (verb) + free trial (outcome). “Book a 15-minute call” — book (verb) + call (outcome) + 15 minutes (qualifier). The qualifier reduces uncertainty and increases click confidence because the user knows exactly what they’re getting into.

First-person labels can be effective too. “Yes, send me the report” or “Start my free trial” creates a sense of ownership. It’s a small psychological shift, but it makes the action feel more personal. Just don’t overuse it — save first-person for moments where commitment matters.

Keep labels short. One to two words, max four, under twenty characters. No punctuation. Sentence case reads cleaner than all-caps. And avoid using the same label for different actions — if “Get Started” appears on the homepage, the pricing page, and a blog post CTA, users won’t know what they’re actually getting.

The Five States Nobody Talks About Enough

Many designers only think about the default state. But a button that looks the same whether it’s clickable, hovered, focused, pressed, or disabled is a button that doesn’t communicate. Users rely on these visual cues to know the interface is working.

Every button needs at least six states. Default is the starting point. Hover shows a subtle shift — slight darkening, a small elevation change, or a color shift — that confirms the button is interactive. Focus provides a visible outline for keyboard navigation, which is required under WCAG 2.1 AA guidelines. It cannot be the same as hover because a keyboard user needs to see focus without a pointing device.

Active or pressed state gives feedback that the click registered — a slight inward movement or darker fill. Disabled should show reduced opacity, around 40-50%, and a cursor change. Never remove the disabled state entirely; if a form is incomplete, the button should look unclickable, and ideally a tooltip explains why.

Loading states matter more than most people realize. When a button triggers an async action — submitting a form, processing a payment — replacing the label with a spinner or progress indicator prevents double-clicks and reassures the user that something is happening. The Material Design button guidelines cover these states thoroughly, and they’re worth referencing when building a component library.

Accessibility isn’t a bonus feature here. Minimum contrast ratio of 4.5:1 for button text against the button background (3:1 for large text) is the baseline. Icon-only buttons need aria-label attributes. And never, ever disable the focus ring — that’s the equivalent of removing the handrail on a staircase.

Mobile Isn’t a Smaller Desktop

The temptation is to take the desktop layout and shrink it. But thumbs don’t work that way. Steven Hoober’s research on thumb zones shows that the comfortable reach area covers roughly the center and lower half of the screen. The top corners and upper areas require shifting the grip, which makes one-handed use awkward.

Primary actions belong in the lower half. Bottom navigation bars — the pattern used by Instagram, Twitter, and Spotify — keep key actions within thumb reach. A sticky CTA button fixed at the bottom of the screen, like DoorDash and most e-commerce apps use, keeps the primary action visible no matter how far the user scrolls.

Minimum touch targets are well established: 44×44 pixels on iOS per Apple Human Interface Guidelines, 48×48 dp on Android per Material Design. But those are minimums. Primary actions deserve larger buttons. And spacing between buttons — at least 8-16 pixels — prevents accidental taps. A mistap that loses checkout data isn’t a minor annoyance; it’s a lost sale and a frustrated customer.

Search fields on mobile are a specific pain point. Baymard’s research found that 53% of tested mobile sites failed to provide a UI submit button next to the search field. That means users relying on the touch keyboard’s submit button — which doesn’t always work the same way — or they’re left guessing. Always place a visible submit button on the right side of the search field, styled to stand out.

Form buttons on mobile also need special attention. A sticky “Apply” button in filter interfaces prevents users from losing their selections. And auto-applying changes instead of requiring an “Apply” click — highlighting the changed values — is smoother for most scenarios. Save the explicit confirmation for actions with real consequences, like editing an address.