What is a Ghost Button? Tips on Button Design
Buttons, especially call-to-action buttons, play an important role in your interface, and their design, including their size, shape, and fill can affect their performance and therefore your conversions.
In this blog we look and how and when ghost buttons should be used for best results.
What is a Ghost Button?
A ‘Ghost button’ is the name given to those buttons that have a label and an outline but no solid fill, where the body of the button adopts the look of the background. They are commonly used on websites and user interfaces with simple and minimalistic aesthetics.
Should you use Ghost Buttons?
Deciding whether ghost buttons are the right choice for your website goes beyond aesthetics. It is important to consider what your buttons are trying to achieve and how their design will impact results. Despite their aesthetic advantages, ghost buttons present a series of challenges that ought to be taken into account when deciding whether to use them.
Accessibility
One important aspect of designing a good and effective button is accessibility. From the first flashlight button to the now virtual buttons on your phone (see the history of buttons in this post from Toptal), a common theme throughout the years is that buttons are easy to find, read, and use in order to efficiently fulfil their purpose.
Contrast provides accessibility and draws the user’s attention to the label or call to action of the button. When present on anything other than a solid background, ghost buttons may create accessibility problems to the user. If the contrast between the text and parts of the background image is insufficient, the text may be illegible or the button itself may become harder to locate on the page.
Conversions
Perhaps most importantly, there is some evidence to show that ghost buttons may be less effective at driving conversions than solid fill counterparts.
Elevated Third, for example, found that in newsletters with identical formatting and content, solid CTA buttons outperformed ghost buttons by 7% (based on approx. 160 emails opened). Similarly, Conversion XL saw a 20% decrease in clicks on the homepage buttons in the ghost button variation (based on over 10,000 visits to their webpage). Conversion XL also found that, when compared to solid fill counterparts, ghost buttons are harder to find and less effective at drawing the user’s attention.
These results indicate that, in broad terms, ghost buttons have a negative impact on users’ attention and conversions. However, this is not to say that ghost buttons should be avoided altogether. These results are circumstantial to the websites on which these tests were conducted and a multitude of factors can influence whether or not ghost buttons will be the right choice for your design.
How to effectively use Ghost Buttons
As we have seen, ghost buttons are likely to draw less user attention than solid ones. However, there may be cases where this result is desired, or not applicable.
Use Ghost Buttons as secondary CTA buttons
Ghost buttons can make effective and aesthetically pleasing secondary CTA buttons. When used in conjunction with solid primary buttons, the design is effective at establishing hierarchy and clearly communicating which action you want the user to take first.
Test, Test, Test!
Realistically, the results of the tests mentioned above do not mean that using ghost buttons is definitely going to be detrimental to your conversion rates. The best way to find out whether ghost buttons work on your interface is by carrying out A/B testing to determine what the best options are for your project. Try out different variations of your buttons to find out how your users respond to them, and use that data to inform your decision on the balance between aesthetics and usability.
UX Design with PixelTree
UX Design has the power to transform your business. Pixeltree delivers designs that are visually appealing and easy to navigate, to help you meet client’s expectations. We’ll help you overcome design challenges by conducting research to understand your customer’s needs, testing designs, and incorporating user feedback. Get in touch today to find out more about how we can help you.