Welcome to Bucaro TecHelp!

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

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

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');">


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>

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.

display: inline-block;
font-size: 18px;
color: white;
padding: 8px;
border: 2px solid white;
text-align: center;
text-decoration: none;
background-color: white;
color: black;

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:
• How to Overlay Text on an Image
• Create a No Image Rollover Button or Badge
• Easy Scrollable Area Code
• How to Center a DIV Within a DIV
• Easy Rollover Menu Code
• CSS Arts and Crafts - Create a Graphic Cube Using the CSS3 Transform Property
• Using Google Fonts
• Use @font-face Rule to Load External Fonts For Your Webpage
• How to Style a Table
• Easy CSS Tabbed Navigation

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-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268