How To Add Live Demo, Download, Hompage Buttons To Your Blogs

This article will show you how to create Live Demo, Download, Homepage fancy buttons using simple CSS. It is much better to use this technique than to use image buttons because you can apply the style to any link and at the same time you don't have to create an image for each button which makes your blogs take longer to load. There is a CSS style that can help you create a button like effect easily with CSS.

1. Go to your Dashboard > Edit HTML

2. Search for ]]></b:skin> before it paste the following CSS Code



.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#999999;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color:#1666DC;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}

3. Save your Template....


STEP 4. How To Use Live Demo, Download Buttons in your Post
Go To your post, where you want to show that Buttons

To display this customized buttons to your post you only need to add the following code in the
  "EDIT HTML" section of your Blogger Editor,

For Live Demo Button

<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

For Download Button

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>

For Homepage Button

<a class="button homebutton" href="YOUR HOMEPAGE LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Homepage</span></a>




You just need to replace YOUR LINK HERE, with your Live Demo Link, Download Link and Homepage link. And you can also change text to display with your text.