Ghost buttons are the transparent rectangular and square shape buttons which keep the background visible. These buttons are suitable for websites with large images. These buttons are called ghost because of their transparency.  Most ghost buttons are larger than the normal buttons, but they never obstruct the screen area behind them. Ghost button’s features are:

  • Transparent with background showing through
  • Light font for call-to-action
  • Surrounded by a thin outline
  • Larger than traditional buttons
  • Contains simple text
  • The colouris often black or white

Such types of buttons are used on landing page style website because they can easily capture visitor’s eye and also provide “call to action” response. These are very simple to use, a beginner level designer can also easily deal with them.

Where to put ghost button on your website?

Ghost buttons are commonly placed at centre of homepage or landing page as they can get high visibility here. It’s not a necessary condition. It’s something common because when entering a new website, human eye focus on centre of page for a few seconds.

What are some of the advantages and disadvantages?

Some of the pros of ghost buttons are:

  • Clean and simple design
  • Easy design and implementation
  • Ghost buttons create a focal point for calls-to-action without being obtrusive
  • Ghost buttons gives a simple look to your website
  • These buttons works with almost any kind of design

Some of the cons of ghost buttons are:

  • Ghost buttons can frustrate users because they fall too far into background
  • Difficult to recognize for new users
  • Can’t used with flashy or high contrast images
  • Difficult to position


As such, these buttons make the design look more delicate and attractive, but require to be incorporated carefully. If these buttons are used in correct way can be good for design.

(Vantage Webtech)