As part of the design trends as early of 2014, ghost buttons are making the most impact among both designers and online visitors.
This type of buttons is described as “empty” and “hollow.” Ghost buttons are bordered by the thin line with plain text (in sans serif) inside them to encourage visitors to click the button.
The origins of ghost buttons are unclear, but can nonetheless be traced back from a Tumblr blog websitewithghostbuttons.tumblr.com.
The strange thing about these buttons is that, even though they are transparent (like a ghost) and may seem like they will go unnoticed by visitors, ghost buttons prove to be effective calls to action. Due to their minimalist appearance, ghost buttons integrate themselves seamlessly into the design, which in turn grab the attention of people.
As a designer, you’d want to maximize the impact of your website to your target audience by providing the best and most aesthetically pleasing elements in your design. If you are interested in using ghost buttons to make the most out of your website design, consider the examples featured below as inspiration.
1. nois3
Why this is effective: Whereas most websites scrolled vertically, nois3’s homepage above the fold breaks the mold by placing the ghost button on the right side of the page. This technique encourages visitors to look at the page from left to right to get to the call to action.
2. Themes Kingdom
Why this is effective: Themes Kingdom use a dynamic gallery to showcase thousands of WordPress themes available for download on their site. For each gallery slide, there are two ghost buttons – one that allows visitors to browse the specific category and another that lets you view all the themes. This is a great use of ghost buttons to compartmentalize the content found in the website.
3. VERBAL+VISUAL
Why this is effective: The background image applies a dark filter that allows the light text and ghost button to rise up from the design and make an impression to visitors. It also helps that the web copy says enough to explain what the service is about and entices visitors to click the button to learn more.
4. Throne Watches
Why this is effective: Unlike most websites that use filter effects on their background image to put emphasis on ghost buttons, Throne Watches uses a hi-res photo of their products as background. The purpose of doing this is to let the image do the talking and minimize the web copy on your splash press.
5. jaspurnl
Why this is effective: The outline color of the button complements the background color, making the ghost button much more visible in this example. The use of spacing and placement of web elements in this minimalist website also help emphasize the ghost button in the page.
6. GUILLAUME MARQ
Why this is effective: There are three ghost buttons on the page: the My Resume and Contact Me buttons (found on the upper right hand corner of the page) and the Hire Me button (placed smack in the middle). From here, you can clearly see the hierarchy of buttons on the page – the most important button is found where it’s the most visible, while the less important ones are found on place on the less visible area. Also, the Menu section is scaled down to an icon on the upper left portion of the page, thus putting more emphasis on the buttons.
7. Dribbbox
Why this is effective: The Live demo ghost button goes in contrast with the solid Download button. Also, the Download button has an arrow icon pointing down while the Live demo button has the right hand icon with the index finger pointing up. This gives both personality and allows visitors to identify with each on a visual level.
8. The Distance
Why is this effective: The background image resembles that of a night bar – a brick wall with the name of the site in LED lights as the signage. This makes the neon-colored ghost buttons pop out from the page even more.
9. NZK
Why this is effective: Another website example that uses an image background with filter effects to create contrast with the white text and ghost button.
9. Richard Outram
Why this is effective: The example above shows how web copy and ghost button of a page work hand in hand together to create a seamless web experience. In particular, the first sentence of the copy takes the attention of the eyes up to the text. The icon on the ghost button, an arrow pointing down, which indicates that people should scroll down the page to see the site owner’s services.
10. Iuvo
Why this is effective: The ghost buttons are accompanied by large icons to describe which page visitors will be brought upon clicking on any of the buttons. This way, the icons serve as visual associations to the buttons.
11. HARBR
Why this is effective: Another great example of concise but highly effective web copywriting that seamlessly leads visitors down to the page’s ghost button. The use of different font faces help in emphasizing the message of the splash page.
Key takeaways
- The placement or location of the ghost button on your web page plays a crucial part to its effectiveness. While placing the button in the middle is the most logical choice since this is the position that is most visible to visitors, you may need to play around with the different places where the ghost button should appear to achieve the desired effect.
- The use of space has an effect on how ghost buttons can be seen by your visitors. Since this type of buttons are hollow, you need to strategically place them at a location on your page that is barren or not disrupted by your background image.
- While the use of ghost buttons help in giving your website a current feel, it’s not for everyone. It depends on different factors mentioned above to determine whether or not this type of button is appropriate for your site.
More on ghost buttons:
