Image source: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCcmgg-AI1wLJbN55tbSYSxsu-w0SXaLC_RAsjyW5yEP19PnnldSuhmK8Xpwm1A9VXZHFdm_CulPlasAuSFIkvcsW67s2kGkLq_gnqqeObSvPAq0_-9oTokBqh1QT8-9AHx6obF0ng2c/s640/back-button-designer-blouse-designs-gautam-marketing+%25289%2529.jpg
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
Thats it. Just three elements. When it comes to creating the button itself, you may not have a lot of creative freedom since theyre 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 its placed and whether its used on a plain, solid colored background or placed on an image, etc. Now that we have defined the ghost button, lets 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 its 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 youd like to draw attention to - make sure its the very first thing thats 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 thats chaotic to the eye. You should really focus on just one button that you want to stand out. Whether its My Account, the Home button, or even Sales, make sure you are capitalizing on whats important without going overboard and boxing all of the tabs on your navigation menu. As for your product landing page, ensure that its 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. Thats 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 youre 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 thats already filled in and bright, thus, by using a contrasting ghost button thats 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) theres 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 thats circular. That shape options are limitless - dont be afraid to mix it up and use whats 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 thats 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 youre considering adding some new buttons to your website and youre in doubt what to do, ghost buttons are always a safe route to take. Theyre 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.
