A ghost button is a button that has an outline but no solid fill. They’re a popular trend across the web, but many designers are misusing them. Misusing them can lead to users missing them when they visit your site.

Lower Click Through Rate

Ghost buttons are popular among designers because they exude a modern, minimalist look and feel. It’s not loud, dominant and doesn’t call out to the user. But that’s exactly the problem when you use them as a call to action.

A call to action button needs a strong visual cue that attracts the user’s attention and calls them to click it. A ghost button’s minimal appearance lacks a strong visual cue, which results in a lower click through rate.

A low click through rate means most users are overlooking ghost buttons, which leaves them less engaged with a site. Several different studies have found that users recognize solid buttons a lot quicker and easier than ghost buttons. This was concluded in an A/B test, click test, and visual attention test.

The click through rate difference between a solid and ghost button is significant. This company did a study and found an increase in the click through rate of their email newsletter by switching to solid buttons. For every email opened, the solid button outperformed the ghost button by 7%.

It’s foolish for designers to sacrifice their click through rate to follow a stylish trend. Users will get more utility from a site with clear visual cues than one without. And designers will get more user engagement that can lead to conversions.

When to Use Ghost Buttons

Ghost buttons are only a problem when they’re used in the wrong contexts. When used in the right context, they can clarify the priority of an action and increase task efficiency.

When users see two buttons together, they need to think about which button to click. They’ll read the text labels to decide, but putting visual cues on the buttons can help them decide quicker. A solid button for your main action and a ghost button for your secondary action will accelerate the user’s decision-making.

In the “bad” example above, you can see how the outline of a ghost button gets lost with the lines of text when it’s by itself. If you were scanning the page, you could easily miss the button.

In the “good” example, the solid button carries so much visual weight that it’s hard to miss it. Your attention is drawn to the main action even though its surrounded by text and another button. The secondary action is still visible by its close proximity, but it does not take attention away from the main action.

Don’t Lose Your Visual Cues

Designers are misusing ghost buttons without realizing the consequences it has on their users. They assume the outline around a ghost button is a strong enough cue for a call to action. They assume it’s okay to use ghost buttons for its style because other sites do the same. But studies show this is not the right approach to using them.

Visual cues are disappearing from buttons and users don’t appreciate that. Designers may like the minimalist style of a ghost button, but the function of a button is for action, not aesthetics. The context in which you use a ghost button matters. Use it in the wrong context and your button’s visual cue will disappear like a ghost.

Toolkits