How To Add Fancy Buttons in Blogger

Links are very common on blogs, But many blogger's don't realize the power that they have with CSS to manipulate and manage their links effectively.

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.

Live Demo

STEP 1. How To Add Live Demo, Downlaod Buttons To Blogger

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 2. How To Use Live Demo, Download Buttons in your Post

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>

For Download Button In Center

<div style="text-align: center;">
<span style="display: inline-block;"><a class="button downloadbutton" href="Link Here" rel="nofollow" style="" target="_blank">Download</a></span></div>

For Next page and Prev page

<div style="text-align: center;">
<span style="display: inline-block;"><a class="button downloadbutton" href="Link Here" rel="nofollow" style="" target="_blank">Next Page</a></span><a class="button downloadbutton" href="Link Here" rel="nofollow" style="" target="_blank">Prev Page</a></span></div>

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.

That's..... Enjoy!