All posts tagged “Ghost”

Ghost Buttons: Will This 2014 Design Trend Reign in 2015?

Now I know that a ghost button is a true trend of 2014. But some weeks ago, we all had heard nothing about this strange wording. I mean, I wrote web design related posts describing new empty buttons…

Click through to read the rest of the story on the Vandelay Design Blog.

Vandelay Design

A Quick Look at the Ghost Button

Every year various design trends fade in and out of the community. In 2014, one of the dominant design trends to pass through the web design world has been the Ghost Button. To understand the Ghost Button, we must firstly go over the Ghost Button itself, where this trend originated from, what are some of the pros and cons, and also view some examples.

Let’s get crackin’.

The Ghost Button

The Ghost Button is very easy to identify and have been increasingly cropping up in the last 10 months or so. In all occasions, the Ghost Button is transparent and empty. They seldom have color other than white and typically placed on a picture background or hero image. They most often appear as Call to Action (CTA) buttons and offer a clean look. They are often paired with a cleanly designed website and compliment the overall clean aesthetic of the layout. Some other design elements of a Ghost Button are:

  • Surrounded by an outline
  • White or black text and border color (minimal color)
  • Larger than traditional buttons
  • Prominence on the page
  • Stands alone – or if in a group, related to another group of buttons
  • Transparent with background showing through

You often see ghost buttons used well when they have a distinct contrast to their background and are clearly readable. This can definitely help with a website’s CTA since it provides an obvious element on the page — at least when placed against a background image. You also often notice them in the startup industry as a core design element, as well as see them in flat HTML and CSS frameworks such as Bootstrap and Startup Framework.

At the end of the day, it seems that there is a correlation between flat design and ghost buttons.

Ghost Button’s origins and Flat Design

Design trends are sometimes difficult to track down and Ghost Buttons are no exceptions. The first website that coined the term Ghost Buttons came from the tumblr blog Websites with Ghost Buttons. The ghost button seemed to evolve from Apple when they redesigned iOS 7. Many, if not all of the buttons on iOS 7’s UI are what we would call a ghost button.

Notice safari’s bookmark section…

ghost buttons

…and the update screen in the app store…

ghost buttons

…all great examples of Ghost Buttons.

Amit Tripathi of Crispy Coding agrees that the introduction of flat design through iOS7 has helped increase the popularity of the Ghost Button: “Since iOS7 promoted the use of flat UI, ghost buttons have also seen a huge surge in popularity” – via Ghost buttons in Web Dev.

So at the end of the day, the origin of the Ghost Button came from the flat design revolution. Though not created by Apple themselves, Apple helped increase the popularity of not just flat design but also the ghost button.

What are some of the Pros and Cons

With every design trend, it is important to understand the pros and cons of the specific trend.

Some of the advantages of Ghost Buttons are:

  • Clean, simple and modern design
  • Obvious CTA (when used correctly)
  • Unobtrusive CTA (when used correctly)
  • Not distracting — background image viewable
  • Easy design and implementation
  • Sophisticated look

Some of the disadvantages of Ghost Buttons are:

  • Can be confusing for non-technical users
  • Background image could drown out button
  • Button could overpower background image
  • Could be dated in a few years — think long term


ghost buttons avocode

ghost buttons transitions

ghost buttons parallax

ghost buttons unsung

ghost buttons alice couple me

ghost buttons paul van excite

ghost buttons grid style sheets

ghost buttons

Wrap Up

After reviewing ghost buttons, it’s origins, pros and cons, and some examples, it seems that ghost buttons used in the correct way can be good for design and for sales (effective CTA). It doesn’t seem that flat design isn’t going away any time soon, so I definitely would recommend using this design element.

For those who want some html and css examples, feel free to checkout these html and css ghost buttons.

What’s your take on ghost buttons? Let me know in the comments below!

The post A Quick Look at the Ghost Button appeared first on Speckyboy Web Design Magazine.

Speckyboy Web Design Magazine

2015 Rolls-Royce Ghost: The luxury automaker’s latest iteration keeps meticulous details at its core

2015 Rolls-Royce Ghost

by Sue Mead Launched in 2009 as a slightly smaller luxury model within the Rolls-Royce line-up, the Ghost is positioned below the flagship Phantom. It rocketed the marque—known for opulence and magnificence—to “verticalized success,” as Rolls-Royce…

Continue Reading…

Cool Hunting

Ghost Buttons: The New Web Design Trend for 2014

In 2014, the most noticeable trend in web design is the subtle styling of buttons. Named ghost buttons, the simple transparent element has drastically shaped the look of current web design and user interfaces.

20jeans uses ghost buttons on their website.
What is a Ghost Button?
A ghost button is quite easy to identify. A ghost button bears the distinct outlines of a simple geometric shape such as a square, rectangle, circle, diamond and other shapes with no fill. The button text and shape outline create a phantom object hence the name ghost button.

Ghost buttons are typically larger than your traditional button to make them more obvious. They are usually monochrome with white and black being the colors of choice, this is usually to maintain the simplistic feel of …

Read more »

Copyright ©2014 Web Design Fact. All Rights Reserved.

Web Design Fact

Project 2501: poster homages to Ghost in the Shell


The book and movie “Ghost in the Shell” quickly became cult for an entire generation. Project 2501 was started to pay a visual homage to the movie. It was started very small, but quickly became a huge worldwide collaboration with many amazing posters.









The post Project 2501: poster homages to Ghost in the Shell appeared first on Design daily news.

Download the free transport icons package now!

Design daily news

Build your own blog theme for Ghost

Read more about Build your own blog theme for Ghost at

Ghost is a new and free open source blogging platform. Successfully funded through Kickstarter, it surpassed its original request of only £25,000 achieving over £196,000 in funding from the community in May 2013.

Creative Bloq

Steve Gunn + Mike Cooper: Pony Blues: Two guitar virtuosos collaborate through RVNG for a Portugal-inspired session, and a Thai ghost story emerges

Steve Gunn + Mike Cooper: Pony Blues

Cult label RVNG’s conceptual 12-inch series FRKWYS (pronounced “freakways”) pairs young contemporary musicians with groundbreaking predecessors. As there are no limitations on creation, anything can happen—like percussionist David Van Tieghem musically responding to a bulletin board…

Continue Reading…

Cool Hunting

Design Trend: Ghost Buttons in Website Design

You’re reading Design Trend: Ghost Buttons in Website Design, originally posted on Designmodo. If you’ve enjoyed this post, be sure to follow on Twitter, Facebook, Google+!

Ghost Buttons in Web Design

The biggest trend of 2014 is something I’m not sure we saw coming. And it’s all based on one of the smallest design components of almost any website – the button. Ghost Buttons – those transparent, clickable items – are popping up everywhere. And taking the web design world by storm. Who ever thought something […]

Advertise here with BSA


Design Phantom: Ghost Buttons as an Iconic Trend of 2014

Design trend watch: ghost buttons as iconic shapes in today’s websites. Learn more about their power.

Etsy Finds: Ghost Signs

Ghost Signs is a New Jersey-based shop featuring photographs of ghost signs, brick ads, painted advertisements, faded signage, and old hand painted wall adverts. A few favorites are below, but be sure to take a look in the shop for more.

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Etsy Finds: Ghost Signs / on Design Work Life

Design Work Life