In 2014, one of the dominant design trends to pass through the UI design world has been the ghost buttons. Ghost buttons are those transparent and empty buttons that have a basic shape form, such as a rectangular or perhaps squared. They are also have titles like “empty”, “naked” or “hollow” buttons.

Ghost buttons are generally bordered by a very thin line, while the internal section consists of plain text. They most often appear as Call to Action (CTA) buttons and offer a clean look.

Normal state (left) and Focused state (Right).

These buttons are often somewhat larger than traditional clickable buttons on pages and are placed in prominent locations, such as the center of the screen. Trendy and effective, *when done well*, they attract attention with high contrast while putting a new spin on the “flat” look.

Ghost Button’s Origins

The first website that mentioned the term “Ghost Buttons” came from the Tumblr blog Websites with ghost buttons. The origin of the Ghost Button came from the flat design revolution and ghost buttons become trendy when Apple released iOS 7. Many of the buttons on iOS’s UI are what we would call a ghost button.

‘Name’, ‘Release Data’ and ‘Featured’ are ghost-like buttons. ‘Get’ is a ghost button. Image credit: Apple iOS

Simple and plain rectangular shape in combination with neat font inside the frame look perfectly within flat UI.

I Ain’t Afraid Of No Ghost!

Let’s now have a look at some of the positive aspects that the ghost buttons can bring to your design and user experience:

Easy to create. Simplicity is a key reason that makes ghost-style buttons so popular. They are easy to create even for a novice designer. The most popular shape for the ghost button is a classic geometric shape (flat rectangular or oval box) with no visual decorations or animated elements.
Create a focal point. Ghost buttons are great at keeping the eye focused on a page’s primary imagery. With properly chosen background and well-outlined contrasting border ghost button attracts attention without giving a user overwhelming impression.
Improve aesthetics. Ghost buttons can compliment the overall clean aesthetic of the layout. They’re excellent space savers and aren’t distracting since a background image is completely viewable. The simple nature of the button allows the primary design of the page to really stand out more.
Easy to integrate. Ghost buttons work with almost any design schema because they are transparent. They easily blend into the environment of your design.

Ghost buttons may appear alone on a page or be combined in groups. The main idea is to use a ghost button in prominent places of the page to make it noticeable for users.

Things to Consider When Designing Ghost Buttons

While ghost buttons come with a lot of design pros, there are some moments to consider as well. Before designing your app or site, make sure to weight both pros and cons to determine if this concept will work in your project.

Ghost Button as a Call-To-Action Button

In most cases, using ghost button as a primary CTA isn’t a good idea. You can see the problem in Bootstrap example below where the ghost button Download Bootstrap looks almost the same way as their main logo.

Image credit: Bootstrap

Often it’s better to use ghost button for secondary or tertiary content, since it will not (or shouldn’t) compete with your primary CTA. You ideally want the user to see your main CTA and then if it’s not relevant skip over it to the secondary button.

Specular site is a good example — it has a flat button as a primary ‘Purchase Now’ action and a ghost button ‘Take Tour’ as a secondary button.

Image credit: Specular

**Takeaway:** Using a ghost button as a primary CTA goes against conventional wisdom, and it’s best used for secondary or tertiary actions.

Ghost Button Doesn’t Look Like a Traditional ‘Button’

Ghost buttons do break from the established design concept of ‘button’ — or even real world buttons for that matter. Sometimes just spotting a ghost one can be difficult, particularly if it hasn’t been placed wisely.

Not all users may be design savvy; many users that aren’t used to this element may not notice the ghost button or consider it’s not a clickable element. For example, can you spot a button ‘Get Access’ on the page below? It not a simple task even for savvy users.

Image credit: Visage

**Takeaway:** Ghost button can sometimes become a real ghost and blend with the overall layout.

Provide a Focused State

Offering a good visual feedback to users that they’re hovering over a button is good practice. But this moment is especially important for the ghost button, since users might be in doubt if this is a button or not.

Source: Codepen

Be Careful With a Background Image

Ghost buttons can fall too far into the background and frustrate users. The transparency of ghost buttons can lead to problems of legibility. Many times there isn’t enough visual contrast when you place text in a ghost fashion over an image.

In example below, site uses a full screen photo as background. The button is CTA which invites users to click in order to discover more information about the company. But since the color chosen for the button is white, the word ‘imagemaking’ isn’t in contrast with the light dress of the girl. In result, the readability is significantly affected.

Image credit: bilderphoto

**Takeaway:** As far as ghost buttons are usually used on photo backgrounds, it’s essential to use *contrasting colors* for borders and inner text to make them more prominent.

Use Meaningful Text for the Ghost Button

Ghost button text is more complicated than just ‘Click here’ or ‘Save It’. The words used in these buttons needs to be clearly thought out and placed in context with the rest of the design.

You can definitely notice this moment in Integra example where you can see a showreel of moving images behind the focused text on the homepage. And a ghost button ‘Showreel’ indeed look like it is telling you what is going on.

Image credit: Integra

##Personality and Ghost Buttons Due to their simplicity and minimalist style ghost buttons tend to look exactly the same on every site or app. It’s really hard to create a unique ghost button with a set of a few traditional shapes.

As a solution designers tend to add small decorations around buttons or use creative fonts (not just sans-serif) to add some personality. You can see example below.

Image credit: creative-knight

Conclusion

Every button (classic or modern one like ghost button) is meant to direct users into taking the action you want them to take. Button UX design is always about recognition and clarity. A smooth handover keeps the conversation flowing along; glitches such as an unable to find a right button, at best, as interruptions and, at worst, as breakdowns.

For more information about button design you can read following article: Button UX Design: Best Practices, Types and States

Thank you!