Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Flat Design and Ghost Buttons

By Stephen Bucaro

Ghost Button

One of the first goals after the development of the Web was to make elements on a Web page look more realistic. That involved making things like buttons look 3D. First it was done using images, later it was done using styles like the box-shadow and linear-gradient properties. Then came mobile devices.

Mobile devices, like smartphones, need low power consumption processors to increase the time between battery recharges, and they need faster Web page rendering to reduce bandwidth consumption and user wait time. For this reason 3D effects were abandoned and flat design became the trend.

Ghost buttons are one of the expressions of this trend. A ghost button has no gradients or shadows or 3D effects at all, in fact it has no color, it's transparent. A ghost button is simply a rectangular outline with some text in it. That makes a ghost button, but is a ghost button easy to make? Well, it ends up - yes.

<div style="width:392px; height:235px; background-image:url('bg2.jpg');">

</div>

First define your image to be the background of a parent element, like a div, that will contain your ghost button. Example code for this is shown above.

<div style="width:392px; height:235px; background-image:url('bg2.jpg');">
<a class="ghost-button" href="#">Ghost Button</a>
</div>

Next place the code for a link inside the parent element. Give the link a class attribute as shown in the example code above. Replace the # sign with your target link URL.

<style>
.ghost-button
{
display: inline-block;
font-size: 18px;
color: white;
padding: 8px;
border: 2px solid white;
margin-left:118px;
margin-top:100px;
text-align: center;
text-decoration: none;
}
.ghost-button:hover
{
background-color: white;
color: black;
}
</style>

Shown above is the code for a ghost-button style class. Paste this code in the head section of your Web page. For your specific application edit the value of the font-size property. To position the button inside the parent element, edit the values of the margin-left and margin-top properties.

That's all there is to it. Now you can create all kinds of ghost buttons for your flat web design.

More Easy Cascading Style Sheets:
• Easy CSS Tabbed Navigation
• How to Color Alternating Rows or Columns in a Table
• Add Style to Your Blockquotes
• Spice Up Your Web Forms with Color and Graphics
• Using the HSL Color Specification
• Display Overlapping Images on Your Webpage
• Make a Fixed-width Variable-height Round Cornered Box
• Basic Introduction to Simple Responsive Design With Code
• Use @font-face Rule to Load External Fonts For Your Webpage
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property