What are ghost buttons and why you should be afraid?

Ghost buttons, buttons with a colored border but no color fill, have become pretty commonplace online. They get the name “ghost” to describe their transparent nature — since they lack a fill color, they take on the background’s appearance (frequently a photograph).

Like this:

Or this:

They look nice, don’t they?

Well, sugar also tastes nice. But it’s poison.

In reality, the ghost buttons are conversion killers.

These buttons should be the most important elements on your page. If someone comes to the shop but doesn’t click “Shop Now,” “Download,” or “Live Demo,” the whole purpose of the visit is gone. You have just lost a potential customer while looking pretty.

The article goes into more detail about where this trend came from, when it started, and how to avoid it.

The article is more design-focused, but it also has some solid arguments about conversion and effectiveness.

From my experience, only use such buttons as a secondary call to action. For example, if your primary button is “Add to cart,” you can have a ghost button “Learn more” or “See more examples,” for those who are not convinced yet.

But never have only ghost buttons on the page! You’ll be driving away customers for no good reason.


Ghost buttons: Why you should be afraid.