What are ghost buttons?
Ghost buttons are transparent ‘calls to action’ that have a thin border, text label and no colour fill. They have inherited the name ‘ghost’ to describe their transparent image as they often take the background’s appearance but they also have titles like “empty”, “naked” or “hollow” buttons.
In UX design, buttons are always about recognition and clarity. Like most things, there are pros and cons of using ghost buttons in your designs. What you need to remember is that every button is meant to lead users into taking the action you require them to take.
Should ghost buttons be busted? Below we discuss the pros and cons
Ghost Pros ?
✔ Improve aesthetics
They work well on minimal or flat designed websites as they give an elegant, subtle feel to the design. Sometimes it’s the best way to add a cutting-edge look to a new or existing website. The simplicity of the button allows the main design of the page to really stand out.
✔ Visual hierarchy
Their subtle appearance can give emphasis to other elements on the page. If used properly they can help with visual hierarchy by giving an order of importance when there are more than one ‘calls to action’ on a page
✔ Create a focal point.
Ghost buttons are great for keeping the user’s eye on the hero image. With a well-curated background and well-outlined contrasting border, ghost buttons draw attention without being overwhelming.
Tip: Ghost buttons are best for secondary actions because not all users are design savvy; they are used to traditional buttons and may think a ghost button is not clickable.
Ghost Cons ?
❌ Decreased click-through rate
Ghost buttons are popular amongst web designers who love the minimalist look – nice design doesn’t mean good design. Buttons need to have a strong visual presence that attracts the user’s attention to proceed with the desired task flow.
“Ghost buttons can have ghost conversion”
It has been proven through many tests that ghost buttons are overlooked and therefore have a lower click rate. Several A/B tests have found that users recognise solid buttons a lot quicker and easier than ghost buttons.
Fresh Egg conducted an A/B test and found a 20% decrease in clicks, based on 10,000 visits when testing the following.
Context matters. The ghost button failed the test but that doesn’t mean they wouldn’t do well when used as secondary CTAs or within a design that supports the simplicity of ghost buttons.
Just be mindful, when you place an unresponsive call to action, lacking colour on top of dark and complicated background designs, you can’t expect users to notice it.
❌ Legibility and Contrast
Ghost buttons can come with usability issues if the design on every page isn’t well considered. If the button is placed over a busy image without sufficient contrast, it can be difficult for users to read the call to action which can impact conversion.
Animation can often help ghost buttons to stand out a little more on hover however, it still may not be clear that is it a button particularly on mobile. Take into consideration your demographic because ghost buttons can lead to some unwanted confusion.
The above issues may not seem too drastic but the potential impact on conversions is one that can cost the business a lot of money. It is important to test these styles and get real results for your audience.
Things to consider when designing ghost buttons
- Use ghost buttons as a secondary action
- Be careful with the background image
- Consider bold contrast
- Provide a focused state
- Use Meaningful Text for the Ghost Button
- A/B test the ghost button vs solid button
Ghost buttons aren’t always a bad thing. In fact, in some situations, ghost buttons prove to be just as effective as solid buttons in getting clicks and conversions from users. While those cases are usually where the ghost button is a secondary clickable element (for example, one you don’t necessarily want users to click straight away), it’s still useful in its purpose.
Ultimately, it comes down to using ghost buttons in the right way. It is important to regularly review the analytics, evaluate your designs and test other variations. Discover what the calls to action communicate to your users and whether that’s the message you want to send them.