Received web design wisdom states that the most important button on a web page needs to be the one you cannot miss. The big red/orange/green button wars have been fought since the advent of e-commerce sites (by the way, there is no winner) and although there is no one size fits all button, the wisdom states that you can’t be allowed to miss it. It’s big, colorful and, to hell with a coherent design vision, stands out from the rest of the page.


So what is going on with all those ghost buttons? Those hollow things that fit seamlessly, trying not to impede the full page photography background. Surely the ghost button has got its priorities wrong, after all, a button is there to be clicked and to encourage conversion, not fit smoothly into the design of the page. Sure, they look good (a bit Minority Report, a bit Star Trek reboot) and don’t get in the way of anything else, but what good is a ghostly button?


Let’s start with a definition. Ghost buttons’ are those transparent, hollow buttons that have a basic shape form, usually rectangular. They are generally bordered by a very thin line, often only a couple of points thick, while the internal section consists of plain text printed in a light font. They tend to be bigger than normal buttons. Ghost buttons are placed prominently on webpages, almost always as part of an overall flat design scheme.


Here are a few reasons why ghost buttons have gone from trendy to omnipresent in the space of a couple of years:


  • They can provide a call to action without getting in the way of the design. The design needs to be uncluttered and have a minimum of choices for this to work. A smart visual hierarchy will draw the eye, meaning the designer doesn’t have to drop an ugly button to do so.

  • Ghost buttons look good and can contribute to a sophisticated, clean and classy design.

  • The simple nature of the button allows the overall design of the page to take centre stage and to stand out more.

  • They fit in just about anywhere. Plain colour, no colour, full size photography – the ghost button takes on the properties and merges well with just about anything.

  • Ghost buttons are flat and fit perfectly onto a page using flat design.

  • They are simple to create. Less thought is necessary for a button that segues so well into a webpage.

They aren’t always the right solution. Busy e-commerce sites for instance, won’t ever go this way because the simplicity of a ghost button would get lost in the clutter. But for everyone else, the Ghost button is a trend that doesn’t look like it is going away soon.