Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Holiday Gift Guide
Holiday Gift Guide

Flat Design and Ghost Buttons

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268