Design trends: Ghost buttons

Over the past few years, ghost buttons have become increasingly popular in the website design world. With a thin border and a transparent background, they offer a clean, modern look. Should you consider using them on your website, and if so, what’s the best way to use them?

How we got here

Website design has taken several major turns since the beginning of its existence. The early days of the Web featured primarily plain text and blue underlined links, as dialup speeds prevented sophisticated design. Once broadband internet became common, though, website design took on more creativity. Splash screen animations created with Flash became popular, and website design shifted from primarily text to more a more image-driven look. Because interacting with the digital world was still a relatively new concept, though, the Web had a sort of 3D, realistic look to it. This concept, known as skeuomorphism, drove UX decisions in the early 2000s.

The next major shift involved a move from a desktop-first design to a mobile-first design. When Apple invented the iPhone and utilized skeuomorphic designs throughout its OS, textures reached their peak but design shifted to a responsive strategy to work well on a variety of devices. Hover effects were no longer effective as they don’t work with a tap interaction. Flash was quickly shelved. And when Apple’s iOS 7 and Microsoft’s Windows 8 shifted from a skeuomorphic look to a flat design, website designs again followed suit.

Buttons evolved over time as well. In the Windows 3.1, 95, and 98 days, Microsoft was known for light-gray buttons with a highlight-and-shadow border that emulated being pressed down when clicked. Skeuomorphism drove button design, too — digital buttons were made to behave like physical ones. But the shift to flat design changed buttons in big ways, too. Since most people became accustomed to interacting with digital elements, they no longer needed to be restricted to behaving like their physical counterparts. It was mostly understood that people knew what a button was, and knew to click it. It didn’t need to “move.” So buttons simple became a colored rectangle.

Most recently, ghost buttons even dropped the need for a separate color. A simple outline is enough for someone to know an object is a button.

How are ghost buttons best utilized?

Adobe Photoshop uses a standard button for Create and a ghost button for Close. The color added to the Create button encourages users to click it.

Adobe Photoshop uses a standard button for Create and a ghost button for Close. The color added to the Create button encourages users to click it.

Ghost buttons have several advantages. Because of their transparent background, they generally fit well with almost any design. They have a sleek, modern look. But you should take care when using them, too. Because they blend in with the background, it’s important to emphasize contrast. If the text of the button blends in with the background, it can be hard to read. This is especially important if you’re using a ghost button on top of an image or multicolored texture. Ghost buttons also probably aren’t the best choice for a call-to-action, as it helps to use a complementary color to draw attention to the action you want a user to take. However, ghost buttons work well for a secondary button, especially if they represent actions you don’t want your users to take.

Obviously, your secondary action doesn’t have to be quite as drastic as our example above, but you can certainly hint at the “right” choice for your users if you add a background color to your preferred action and use a ghost button for your secondary action.