Add Live Demo, Download, Hompage Buttons To Your Blogs

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.


1. Login to your Blogger Account

2. Navigate to Dashboard -> Design -> Edit HTML

3. Search For

    ]]></b:skin>

4. Just above/before it paste the following 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);
    }

5. Save Template

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="Demo Link" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>

For Download Button

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

For Homepage Button

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

You just need to replace The Red Highlighted link with your Link, And you can also change text to display with your text.