Ghost Buttons on Top of Photographs

A thin white outline

Many home pages open the same way: a photograph across the whole screen, a headline in white, and beneath it a button drawn as a thin white outline, with white words inside and the photograph showing through.

Designers call these ghost buttons. They arrived with flat design a few years ago and are now standard in theme demos, where they look calm and expensive.

On a real photograph, viewed on a phone, they often nearly disappear. The outline merges with a white hull, a bright sky or a patterned wall, and the words float over whatever sits behind them.

Visitors scroll past the one action the page was built around, usually without knowing it was there.

Why the demo looked fine

• The demo photograph was chosen to sit behind that button.
• Flat design stripped buttons of shading, then of fill.
• Large office screens make thin lines look crisp.
• Solid buttons looked heavy against big photographs.
• Two buttons side by side, one deliberately quieter.

The first is the one that catches businesses out. The demo photograph has a calm, dark area exactly where the button sits; your own photograph puts masts, signage or sky there instead.

What makes a button readable

Readability comes down to contrast: the difference in brightness between the words and what is behind them.

WCAG 2.0, the usual accessibility reference, sets a minimum contrast for text: 4.5 to 1 at ordinary sizes, 3 to 1 when the text is large. A filled button can be measured once, and it passes or fails.

On a photograph, the background shifts from one spot to the next. Part of a word may sit on dark water and the rest on a white hull, and no single number describes it.

A thin outline has the same problem with less to work with. A line one or two pixels wide is the first thing to vanish.

On a phone in daylight

Phones make it worse in three ways. Screens are small, so the button is small. Many people keep the brightness low to save battery. And outdoors, glare washes out anything subtle.

The crop changes too. A wide photograph on a laptop becomes a narrow slice on a phone, and the part of the image behind the button may be completely different from the part the designer checked.

So a button that was fine on the office monitor sits over the busiest part of the picture on the screen most visitors use.

What visitors do instead

An outline with no fill does not look like something to press. It looks like a frame or a label, and people skim past labels.

So visitors scroll, looking for a phone number or a menu link that does the same job. Some find one. Others decide the site is harder work than the next one in the results.

The owner sees few clicks on the button and concludes visitors are not interested, when many simply never saw it.

A filled button for the main action

Give the one action that matters a solid button: a fill colour that stands out from the photograph, and text that contrasts strongly with the fill.

Make it large enough to press with a thumb, label it with what happens next, such as check availability or request a quote, and keep it the same colour wherever it appears on the site.

Secondary actions can stay quieter, as text links or outlined buttons, as long as they sit on a plain background where an outline can be seen.

Calming the photograph

Where the design keeps a button over a photograph, make the photograph behave. A dark, partly transparent layer over the image steadies the contrast behind white text.

Choose photographs with a genuinely quiet area for the headline and button, and set the crop so that area stays behind them at every screen size.

On phones, it is often simpler to place the headline and button below the photograph rather than on it.

A worked example

A marina on a sheltered inlet rents permanent and visitor moorage, sells fuel and runs a small chandlery. Its home page opened with a sunset photograph of the docks: masts, rigging, white hulls and bright water.

Across the middle sat a white outlined button reading reserve moorage. On the designer's monitor it rested on a dark patch of water.

On phones, the crop moved the button onto a row of white hulls under a pale sky. The outline vanished and the words were barely legible.

Boaters planning a trip scrolled down looking for a phone number, and the office took calls from people asking how to book, though the booking page was one tap away.

The rebuild gave reserve moorage a solid navy button with white text, on a darkened band at the foot of the photograph. On phones, the headline and button sit beneath the image.

Fuel dock hours and the chandlery became text links below. Nothing else on the page changed.

Testing it properly

Look at the home page on a real phone, outdoors, around midday, with the brightness at half. If the button takes more than a glance to find, it is not working.

Check each screen size the site supports, since the crop changes at each. If the header rotates through several photographs, check the button on every one of them.

Then show the page for five seconds to someone who has never seen it, and ask what they would press. Their answer is the test.

The counter-case

Ghost buttons are not wrong everywhere. On a plain dark or light background an outlined button can be perfectly clear, and it works well as the quieter of two choices.

A brand with a strong, minimal style may reasonably keep them for secondary links, provided the main action is unmistakable.

But the action the page exists for deserves a filled button with strong contrast, checked on a phone in daylight.

The check

1. Open your home page on a phone outdoors.
2. Find the main button without searching for it.
3. Check every photograph in any rotating header.
4. Fill the main button with a contrasting colour.
5. Darken the photograph behind any text.
6. Move the button below the image on phones if needed.
7. Keep outlines for secondary actions on plain backgrounds.

Step four is the change that does most of the work. A filled button reads as something to press on any photograph, while every other step only makes an outline slightly easier to see.

Photographs carry their own share of the argument on a page, as covered in before-and-after photos that do not line up.

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.