5 Tips on How to Incorporate Ghost Buttons in Your Designs

Ghost buttons are somewhat of a modern invention when it comes to web design and the online world. No - they’re not little buttons with ghosts and Caspers - rather, they are minimalistic in nature and are often just a word or two surrounded by a simple box. You have probably seen several ghost design buttons before in many different publications. That’s because they are incredibly easy to make and really stand out in the right images and layouts.

image source: bigdrop.com, screenshot

 1. Getting to Know the Ghost Button

Before we begin, we need to have a solid definition of what a ghost button is. Ghost buttons can vary slightly, but must be comprised of the following elements:

● Minimalistic, thin border outline of button
● Transparent background of the button
● Light, non-bulky font

That’s it. Just three elements. When it comes to creating the button itself, you may not have a lot of creative freedom since they’re so minimalistic and simple in nature. However, there are also some steps beyond the makeup of the button that make it much more effective such as where it’s placed and whether it’s used on a plain, solid colored background or placed on an image, etc. Now that we have defined the ghost button, let’s dig into the rest fo the tips on how you can incorporate them into your web designs.

 2. Placement, Placement, Placement!

Just as important as the design structure, knowing where and how to use your ghost button is absolutely critical. Where it’s located on a page can serious help or hurt your conversion rates. You obviously want it to be positioned in a strategic way in order to look aesthetically pleasing and pull in as many clicks as possible. How do you go about doing this?

One of the best places - and most popular - is to place your ghost button right in the dead-center of your homepage. That way, you can really capitalize on the background image while drawing attention to some important text. You can feature the name of your business, a certain sale, or anything else you’d like to draw attention to - make sure it’s the very first thing that’s seen right when people pull up your website. By keeping it in the center of the homepage, it really sets a contrast and makes it stand out.

Also, some other great places to place ghost buttons are on important landing pages where your goal is to sell a product or service, and also on the navigation menu. The navigation menu option works well. Just be sure not to use too many ghost buttons - it can create a cluttered look that’s chaotic to the eye. You should really focus on just one button that you want to stand out. Whether it’s “My Account”, the “Home” button, or even “Sales”, make sure you are capitalizing on what’s important without going overboard and boxing all of the tabs on your navigation menu. As for your product landing page, ensure that it’s simple and center as well, similar to the home page.

 3. Use as a Contrasting Text Element

You should really only have a max of five or so word in your call to action - be sure to make each and every word count when deciding which ones to use. Sometimes you just need a few more words than 5 or 6. That’s why using ghost buttons are so great - you can highlight the call to action of what you really want to say easily in a ghost button box. Text can surround it above or below - regardless of where the other text is and what it says, the eye is still automatically drawn to the ghost button with the simplistic border. Use this to your advantage. Use some supporting text that further explains the call to action and have it juxtaposed to your ghost button.

 4. Incorporate a Ghost Button as a Negative Call to Action

Whether you’re using this in a pop-up sign-up window or a landing page, having one of the buttons filled in fully in color or white, and then contrasting it with a transparent background ghost button can have a great effect and increase conversion rates. Expert web designers argue that we are naturally more inclined to click the option that’s already filled in and bright, thus, by using a contrasting ghost button that’s blank, fewer people are likely to press it, increasing the likelihood that your call to action will be pressed instead.

 5. Play With the Shape

So long as you follow the main principles of Ghost Buttons (keeping the background of the button transparent and using a cool, lightweight font) there’s nothing that says you have to keep things square or rectangular! While using rectangle ghost buttons in the norm, you can totally mix it up by giving it some rounded edges and making it into an oval, or highlight a sale or “Buy Now” button with a ghost button that’s circular. That shape options are limitless - don’t be afraid to mix it up and use what’s best for your website.

 6. Versatile; Useful for any Type of Site Design

At the end of the day, there; never really going wrong with a ghost button - they are incredibly versatile and so simple in nature that they can be placed on the most tech-filled complex sites, to a site that’s geared toward children. The ghost button is incredibly versatile and can be used in several different scenarios. Ghost buttons add a touch of class without being too much. You can really use it in just about every situation and every atmosphere on the web. Be sure to keep the ghost button in your mind as you revamp or build your site.

Bottom Line

If you’re considering adding some new buttons to your website and you’re in doubt what to do, ghost buttons are always a safe route to take. They’re clear, attention-grabbing, and bold - exactly what you need to get clicks and increase your conversion rates. Try to incorporate these tips in your next design and see how it works out.