Ghost Buttons (The Buttons you wanna Lick) – CSS Tuts

Ghost Buttons (The Buttons you wanna Lick) – CSS Tuts

 

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.

Humanz Screenshot

 

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.

Humanz Screenshot

 

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’

Humanz Screenshot

 

4. Parallax

Another demonstration of a very nice combi ghost button on Parallax’s homepage, focusing to ‘view their work’.

Humanz Screenshot

 

5. Weatherjams

Weatherjams’s has a simple and sophisticated looking website with a cool color gradient featuring two ghost buttons.

Humanz Screenshot

 

Its simple to create a ghost button, its all about a <div> and <a> tags. The simple HTML for the layout of ‘Ghost Button’ looks like

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.

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.

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

Author Description

Saurav Rastogi

Saurav Rastogi

I am passionate about designs, android, apps & stuffs. I love to design & develop graphics, logos, websites, apps, etc. I am always browsing new & cool technologies on internet. Besides this I am also a freelance writer on blogs. - Follow me @rastogi_saurav

No comments yet.

Join the Conversation