It has been seen that “Ghost Buttons” are used heavily on almost every good quality websites today. So I think of making a tutorial on these types of Buttons. There are many good looking websites using ghost buttons in a very interactive way. Some examples are shown below, just have a look.
1. Humanz Studioz
Just scroll down after opening the website and you will see plenty of ghost buttons used everywhere such as on the Navigation Menu, on the product links, etc. They have used the product background which is giving it a very good look.
2. Google Nexus
On the landing page of Nexus 7 website you can see the ‘Ghost Button’ (Watch Video) is looking great specifying the product video.
3. Campus Bubble
On CampusBuuble’s homepage there are two ghost buttons with a nice color combination. Also the background video is the ‘butter on the bread’
Another demonstration of a very nice combi ghost button on Parallax’s homepage, focusing to ‘view their work’.
Weatherjams’s has a simple and sophisticated looking website with a cool color gradient featuring two ghost buttons.
Its simple to create a ghost button, its all about a
<a> tags. The simple HTML for the layout of ‘Ghost Button’ looks like
<!-- Code for the Button only -->
<a href="#">GHOST BUTTON</a>
<!-- Other footer elements -->
Here the layout is given by the
<div> tag whose id is
'gbutton1' which can be seen in the shape of a rectangle box. You can change the shape according to your specifications (See the CSS Shapes Collection 1 Tutorial to learn about making shapes using CSS). The CSS for the
gbutton1 is shown below.
/* Code for the div id gbutton1 giving the rectangle shape */
font-family: "Uni Sans Heavy";
border: 3px solid #000; /* gives bold black border to the shape */
padding: 20 80; /* defines the spacing between x and y axis resp. */
transition: all .2s linear; /* for fading effect */
/* Code for the div id gbutton1 when hovered with the mouse pointer */
background-color: rgba(0, 0, 0, 0.3); /* black color with opacity 30% */
transition: all .2s linear;
/* END */
This completes the ghost button, but for finishing we’ve to apply CSS for
<a> tag too. This will remove the ‘link’ type effect from the button’s text (GHOST BUTTON). The CSS for the
<a> tag is shown below.
/* START */
text-decoration: none; /* remove underline effect from the text(link) */
color: inherit; /* inherits the text color assigned previously */
/* END */
At last give the final touch by adding a good background image or a color combination that suits to your web application or a website. I want to thank Splitshire for providing such a beautiful background image. Please Share it with your friends and give me a chance for keep posting tutorials. Share your views on this tutorial may be you can find more creative ways to do that. Follow me @rastogi_saurav