CSS3 Lit Demo and Download Button Pairs

Blogs related to development often use 'Demo' and 'Download' buttons to show up their widgets and plugins that they are sharing on their blog posts. Demo button has a great significance when it comes to the popularity a certain widget seems to get as people like tools and plugins running live, that makes them know the widgets much better. Many widgets now days are powered by CSS3 styling and thus readers can only get to feel their class once they see those crazy effects via the Demo link, otherwise a static image wont perform the job in the best of the ways.

So looking forward to that, we have couple of Demo and Download buttons pairs for you guys that you can use on your blogs.

Before moving on, you can read:

Top 20 Embeddable Music Players For Online Streaming

Button Style #1

Demo Download

<div class="both" id="downloadDemo">

            <a target="_blank" class="greenButton demo" href="Demo Link">Demo</a><a class="greenButton download" href="Download Link ">Download</a>
                <div class="line"></div>
            </div>

<style>
a.greenButton {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4nX2eABeHSsx4XEE6hoChBBtg4stxl_x7KDfVOT5Wf-yJ2KDqktc8QIe7QV84FseAKWftJgfD5YfRlc1YNEzu7XEFhUE5KylOyCn86fLtskYpwhwt2_4hWTRGfQ8PcUeR-pe9Mu-02Rc/s1600/demo_download_buttons.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 68px;
    outline: medium none;
    text-indent: -9999px;
    width: 202px;
}
a.greenButton.demo {
    background-position: left top;
}
a.greenButton.demo:hover {
    background-position: left bottom;
}
a.greenButton.download {
    background-position: right top;
}
a.greenButton.download:hover {
    background-position: right bottom;
}
#downloadDemo {
    height: 70px;
    margin: 25px auto 40px;
    position: relative;
    width: 465px;
}
#downloadDemo .line {
    bottom: -33px;
    position: absolute;
    width: 100%;
}
#downloadDemo.both a {
    float: left;
    margin-left: 20px;
}
#downloadDemo.single a {
    left: 50%;
    margin-left: -101px;
    position: absolute;
}
#downloadDemo.none {
    height: 0;
    margin: 0 auto 50px;
}
#downloadDemo a {
    border: medium none;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 0 1px 1px #CCCCCC;
}

</style>

To use these buttons in your blog posts, simply place the above code in your Edit HTML section of your blog posts and update the Demo and Download links to point towards your widgets/ plugins.

Button Style #2

Live Demo

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

<style>
.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;
}
</style>

Button Style #3

Download

<a class="button downloadbutton" href="Download Link" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>
<style>
.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;
}
.downloadbutton {
background-color:#999999;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
</style>

For each of the buttons, you have to place their respective codes in your blog posts HTML section as shown in the picture below. Though .you can place the CSS part of the buttons in your template for once, i.e before ]]</b:skin> section, but that doesn't work for many people, though you may try that too