Buttons That Do Not Look Like Buttons

Recognition happens before reading

Somebody scanning a page identifies what can be interacted with before they read any of it.

That recognition comes from shape and treatment: a filled shape with a defined edge reads as pressable, and flat text does not.

Which means a button styled as an outline, or as coloured text with generous padding, is being read as a label by some proportion of visitors.

They do not conclude it is not a button, they simply never consider it, and they leave without acting.

The treatments that cause this

• Outline only, with no fill.
• Text with padding and no shape at all.
• The same colour as ordinary text.
• Very light weight type.
• An icon with no label.
• Wide letter spacing in capitals.

The first is the most common. An outlined button beside a filled one is understood as the secondary option, which works, but an outlined button on its own frequently reads as a box rather than a control.

What makes one obvious

Four properties, and they are unglamorous.

A solid fill in a colour used for nothing else on the page.

A defined edge, whether by that fill, a border, or rounded corners.

Enough padding that it is clearly a shape rather than a run of text.

And a label that begins with a verb, since send my details reads as an action and more information reads as a heading.

Those four make the recognition instant, which is the entire requirement.

Size is part of recognition too

Worth combining with the treatment, since a well-styled button that is too small still fails.

A button needs enough height to be an obvious target as well as an obvious object, which on a phone means something around the size of a fingertip.

Padding does both jobs at once: it makes the shape read as a control and makes it comfortable to hit.

Two buttons close together also need space between them, since a near miss that triggers the wrong action is worse than one that triggers nothing.

The two properties are usually solved by the same change, which is why generous padding is the single most useful thing to get right.

The squint test

The check that settles it in five seconds.

Look at the page with your eyes half closed, or step back from the screen until the text is unreadable.

The buttons should still be identifiable as distinct objects.

Where they disappear into the page at that distance, they are not doing their job for somebody scanning quickly, which is most people.

Do it on a phone as well, since a button that reads clearly on a large screen can lose its definition at smaller sizes.

This test is more reliable than any amount of discussion about the design.

A worked example

A business had a redesigned site where every call to action was an outlined rectangle with thin capitals inside it.

It looked considerably better than the previous version and enquiries had fallen.

Watching two people use it, neither pressed the main button on the service page, and one of them said afterwards that she had thought it was a box with a heading in it.

They changed the primary buttons to a solid fill with a verb label and left the secondary ones outlined.

Enquiries recovered above the previous level within two months.

Nothing else on the page had changed, and the design still looked current.

One primary per screen

Since obviousness is relative rather than absolute.

Four equally prominent buttons produce no primary action, and the visitor has to choose rather than proceed.

Give the main action the solid treatment and everything else a quieter one, which makes the important one obvious by contrast rather than by shouting.

That is also what allows a secondary outlined button to work, since it is being read against a filled one.

Where a section genuinely has two equal actions, that is usually a sign the section is trying to do two jobs.

Links should look like links too

The other half of the same principle, and it has drifted.

Removing the underline from links, which became fashionable, means a link is distinguished only by colour.

That fails for anybody who does not perceive that colour difference, and it fails in bright sunlight for everybody.

Underline links within body text, which is the convention every reader already knows, and reserve buttons for the primary actions.

Mixing them, so some links are buttons and some buttons are text, is what produces a page nobody can scan.

Check the pressed and hover states

Since a button that gives no feedback feels broken even when it works.

Something should change visibly when a button is pressed or hovered: colour, shade, or a slight shift.

Without it, somebody who taps and sees nothing happen for a second taps again, which on a form produces a duplicate submission.

On a phone there is no hover, so the pressed state does the whole job and matters more.

Check also that the focus outline is visible for keyboard users, since removing it is a common tidy-up that makes a site unusable without a mouse.

Say what happens, not what it is

A labelling point that goes further than starting with a verb.

Submit, continue, and learn more describe the mechanism rather than the outcome, so the visitor is agreeing to an action without knowing where it leads.

Get a price by tomorrow, see the areas we cover, and book a callback each say what the person receives.

That reduces the hesitation people feel at any button, which is usually uncertainty about what happens next rather than reluctance to proceed.

It also lets one glance down a page tell somebody what the site is offering, since the buttons read as a summary of the available actions.

The counter-case

Restraint is sometimes right.

On a page with many actions of equal weight, such as a list or a dashboard, heavy button treatment everywhere is worse than a lighter consistent one.

Outlined buttons also work well as the secondary option and are a legitimate part of a hierarchy.

And a well-known convention within a particular audience can carry a lighter treatment than a general public site can.

Give the primary action a solid fill and a verb, squint at the page, and keep underlines on body links.

What to check

1. Squint at each page and find the buttons.
2. Do it on a phone as well.
3. Give the primary action a solid fill.
4. Start the label with a verb.
5. Keep one primary per screen.
6. Underline links in body text.
7. Check the pressed and focus states.

Step one finds the problem in seconds, since a button that vanishes when the text becomes unreadable is not being seen by anybody scanning.

The argument about which colour is covered in the button colour argument.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.