Button Design Best Practices for Websites

Buttons are where visitors turn interest into action: call, book, buy, send. Small design details make a big difference to whether people notice and use them.

Make buttons look like buttons

A button should look clickable. Solid fills, clear borders, padding, and rounded or squared corners all help. A line of plain text can be a link, but important actions deserve more weight.

Use clear labels

Say what happens when the button is pressed. "Get my free quote" beats "Submit." "Book a tour" beats "Click here." Start with a verb and keep it short. See how to write calls to action and microcopy for buttons and forms.

Create a hierarchy

Not every button is equally important:

Primary: the main action on the page, with the strongest style
Secondary: an alternative, with an outlined or lighter style
Tertiary: low-priority actions, styled like links

Use one primary button per section. If everything shouts, nothing stands out. See visual hierarchy.

Get the size right

Buttons should be big enough to tap comfortably. WCAG 2.2 AA requires a minimum target size of 24 by 24 CSS pixels, and 44 by 44 is a widely recommended comfort size for touch. Leave space between neighboring buttons. See touch target sizes.

Check contrast

The text on a button needs sufficient contrast with its background, at least 4.5:1 for normal text. The button itself should also stand out from the page, with at least 3:1 contrast for the boundary or fill where it conveys meaning. See color contrast.

Design every state

A button should respond when interacted with:

Default
Hover (for pointer users)
Focus, a clearly visible outline for keyboard users. See keyboard navigation and focus
Active (while pressed)
Disabled or loading, with a clear explanation if an action is unavailable

Use real button elements

Build buttons with the proper HTML button or link elements so they work with keyboards and screen readers. Use a link for navigation and a button for actions on the page. A clickable div needs extra work to be accessible.

Color: myth and reality

There is no single magic color. What matters is that the button contrasts with its surroundings and matches your palette. See CTA button colors: myth vs reality.

Placement

Put the main button where the visitor decides: after the benefit statement, near the pricing, at the end of a form. Repeat it on long pages.

Common mistakes

Vague labels like "Submit"
Too many competing primary buttons
Low contrast "ghost" buttons for key actions
Buttons so small they are hard to tap
No visible focus state

The bottom line

Great buttons are obvious, clearly labeled, easy to hit, and accessible. Give each page one clear main action and make it effortless to take.