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.
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. There is a reason why it's called a "ghost button".
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.