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:
• Easy Rollover Menu Code
• How to Use a Starburst on Your Web Page
• Basic Introduction to Simple Responsive Design With Code
• How to Color Alternating Rows or Columns in a Table
• Code to Move the Scrollbar to the Left Side
• Pro CSS Techniques
• Easy CSS 3D Text Effect
• Easy Visual Effects to Spice Up Your Webpage
• Easy CSS Popup Windows
• Use @font-face Rule to Load External Fonts For Your Webpage

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