Buttons on a website: hierarchy, labels, size and placement
One main action per screen, labels that say what will happen, a button or a link, the tap area, the thumb zone and dangerous actions — with live examples.
In short
A button is a promise of an action, and a good button keeps it: it is clear at once which button on the screen matters most, what will happen after the press and where to find it. One screen has one main action — it is the most visible; the rest are quieter, from an outlined button to a plain text link. The label names the result: “Book a measuring visit”, not “Submit”. A button does something on the page, a link leads to another one — they may look the same, but the element must be the right one. The tap area is at least 44 px, on a phone the main action sits at the bottom within reach of the thumb, and a dangerous action names itself instead of asking “Are you sure?”.
One main button per screen
Four actions of a product card. Switch the view: when every button shouts, none of them is heard.
Solid wood furniture
Oak table 160 × 90
$320
When all four look the same, the eye has to read every label to find “Buy now”. When the buttons are ranked, the main action is found before reading: it is the largest and the most contrasting, the second one is an outline, the rest are text.
Five kinds of buttons and where they go
The kind is chosen by the importance of the action, not by which button looks better.
| Kind | What for | How many on a screen |
|---|---|---|
| Primary | the key action: buy, book, send | one |
| Secondary | an alternative next to the main one: save, call | one or two |
| Outline | minor actions: compare, share | as needed |
| Text | actions inside text, cards and tables | as needed |
| Dangerous | delete, cancel a subscription, reset | only next to that action |
The label says what will happen
A verb and a result. Each good label adds what the vague one hides.
A useful check: read only the button, without the page around it. If it is clear what will happen after the press, the label works. “Submit” fails this test, “Book a measuring visit” passes it.
A button does, a link leads
They may look the same — the difference is in the element, and people feel it.
A link made as a button cannot be opened in a new tab, and search engines do not follow it. A button made as a link confuses screen readers and does not react to the Space key. The element is chosen by what happens, the look — by importance.
Link · <a href>
- opens another page or section
- can be opened in a new tab
- can be copied and sent
- search engines follow it
Button · <button>
- sends a form
- adds to the cart
- opens a dialog or a menu
- switches a filter, a theme, the sound
Size and the tap area
Show the tap area: a small button may look 32 px high, but a finger needs 44.
S · 32 px
dense tables and filters
M · 44 px
the default size
L · 56 px
the main action on a phone
Icon · 44 × 44
with a name for screen readers
Three sizes are enough for most sites. The small one is for dense tables and filters, the middle one is the default, the large one is for the main action on a phone. An icon without text is allowed only for actions everyone knows — close, search, menu — and it gets a name for screen readers.
Within reach of the thumb
A phone is often held in one hand. The thumb reaches the bottom of the screen easily, the top — with effort.
A sticky bar keeps the price and the main action at the bottom while the person scrolls through photos and specifications. It does not get in the way: one row, the background of the page, nothing else.
A dangerous action names itself
“Yes” and “No” make the person reread the question. The right button repeats the action.
Are you sure?
This action cannot be undone.
Delete the project “Kitchen on Forest Street”?
Its 12 sketches will be deleted too. They cannot be restored.
In a dialog the main action stands at the end of the row, and the order is the same in every window of the site — then the hand remembers where “Cancel” is. A dangerous action gets a signal colour, and where possible an undo instead of a question: “Project deleted · Undo” is calmer than “Are you sure?”.
Buttons in code: 2 examples
The right element for each action, a small button with a full tap area and a sticky bar for phones.
Link, button, icon
The look comes from one class, the element — from the action.
<!-- Leads to another page: a link, even if it looks like a button -->
<a class="button" href="/catalogue/kitchens">See all 48 kitchens</a>
<!-- Does something here: a button -->
<button class="button" type="button" data-add-to-cart="oak-table-160">
Add to cart
</button>
<!-- Sends a form: the label names the result -->
<button class="button" type="submit">Book a measuring visit</button>
<!-- Only an icon: the name is for screen readers -->
<button class="icon-button" type="button" aria-label="Close">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
<path d="M6 6l12 12M18 6 6 18" fill="none" stroke="currentColor" stroke-width="1.75"/>
</svg>
</button>Tap area and a sticky bar
A pseudo-element enlarges the tap area without changing the look; the bar keeps clear of the system strip at the bottom of the screen.
/* A small button: looks 32px high, takes a 44px tap */
.button--small {
position: relative;
min-height: 2rem;
}
.button--small::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 2.75rem);
height: max(100%, 2.75rem);
transform: translate(-50%, -50%);
}
/* On a phone the price and the main action stay at the bottom */
@media (max-width: 47.99rem) {
.buy-bar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
background: var(--color-surface);
}
.buy-bar .button {
flex: 1;
min-height: 3.5rem; /* 56px: the large size */
}
}7 rules for buttons
-
01
One main action per screen
The most visible button is the one that leads to the goal of the page.
-
02
A verb and a result
“Get the estimate”, not “Submit”: the label is clear without the page around it.
-
03
The element follows the action
Leads somewhere — a link; does something here — a button.
-
04
44 px and 8 px
A tap area of at least 44 px and at least 8 px between neighbouring buttons.
-
05
The bottom of a phone screen
On a phone the main action lives where the thumb reaches it.
-
06
Danger names itself
“Delete project”, not “Yes”; where possible — an undo instead of a question.
-
07
The same order everywhere
The main action stands in the same place in every dialog and form of the site.
Common mistakes with buttons
-
Every button is the main one
Four bright buttons in a row — and the eye does not know where to start.
-
“Submit” and “OK”
The person has to guess what will happen and what they will get.
-
A
divinstead of a buttonIt cannot be reached from the keyboard, and screen readers do not announce it as a button.
-
Icons without words
Only close, search and menu are understood without a label; the rest need text.
-
Buttons too close together
The finger hits “Delete” instead of “Edit”.
-
The main action as a small link
The goal of the page hides among the secondary actions.
Questions about buttons
What colour should the main button be?
The most contrasting accent of the brand that is not used for other large elements on the screen — with readable text on it.
How many main buttons can a page have?
One per screen. On a long page the main button can repeat in several sections if it is the same action.
Where should the button go in a form?
Under the last field and aligned with the fields, so the eye moves down without a jump.
Does a button need an icon?
Only if it explains the action faster: an arrow for a step forward, a download sign for a file, a plus for adding.
Is a full-width button on a phone a good idea?
For the main action of a form or a cart — yes, it is easy to hit. Secondary actions stay normal width or become text.
What should a form button say?
What the person gets: “Get the estimate”, “Book a measuring visit”, “Download the guide”.
Online form
Buttons
people press
I design interfaces where the main action is obvious on every screen — from a product card to checkout. Tell me about the project — I answer within one working day.