How To Add A Download and Demo Button

TYPE ONE (WITHOUT ANY EFFECT)
                                       

Learn how to add a download/demo button in blogger or website easily.

○ Go to Dabuttonfactory
Create your own custom button with the tools provided by dabuttonfactory.You can change the colour,style,format,etc.
After creating your button do not forget to change the image format to png.

○ Copy the link(say A) and save it we will need it later.

○ Now go to post editor in your blog/site click on HTML

○ Copy the code below and paste it where you want to add your button in posts.

<a href="DOWNLOAD/DEMO LINK">
<img src="BUTTON"alt=""/></a>

●Replace BUTTON with "A"
●Replace DOWNLOAD/DEMO LINK with your respective download link


TYPE TWO  (WITH HOVER EFFECT)
>>Go To Blogger>>Dashboard>>Edit HTML >Find the following code ]]></b:skin> >Just before it place the code given below

.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 rgbaundefined0, 0, 0, 0.25);
 -webkit-box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 box-shadow:0 1px 3px rgbaundefined0, 0, 0, 0.25);
 background:urlundefined"http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
 border-bottom:1px solid rgbaundefined0, 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 rgbaundefined0, 0, 0, 0.25);
 width:auto;
}
.demobutton {
 background-color:#999999;
 text-align:center;
 width:150px;
}
 .demobutton:hover {
  background-color:#00A0EE;
 }
.downloadbutton {
 background-color:#91BD09;
 text-align:center;
 width:150px;
}
 .downloadbutton:hover {
  background-color:#00AC00;
 }
.button:hover {
 -moz-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
 -webkit-box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
 box-shadow:0 1px 11px rgbaundefined0, 0, 0, 0.45);
}

>>SAVE YOUR TEMPLATE

>>Now Whenever you need to add a download/demo button you just need to add the following code in blogger post editor(Note:in HTML section )

For 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>

DEMO BUTTON	DOWNLOAD BUTTON
Live Demo	Download