Code Css Button Live Demo and Download on BlogSpot

Code Css Button Live Demo and Download on BlogSpot 

Links are incredibly common on personal blogs, But many blogger's no longer realize the strength that they have with CSS to control and manage their links effectively.

This article will show you how to create Live Demonstration, Download, Homepage fancy keys using simple CSS. This is greater to use this technique than to work with image keys because you can apply the style to any link as well as you don't have to create an image for each and every button which makes your websites take longer to load. There is a CSS style that can help you make a button like effect easily with CSS.

Step 1: How To Add Live Demo, Downlaod Buttons To Blogger

1. Go to your Dashboard > Edit HTML

2. Search for ]]></b:skin> seacher on HTML of bogger by ctr+F 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 2. How To Use Live Demo, Download Buttons in your Post

For Live Demo Button

<a class="demobutton button" href="<a class="button downloadbutton" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>" 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>