CSS3 Lit Demo and Download Button Pairs

CSS3 Lit Demo and Download ButtonBlogs 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:


Button Style #1 





 <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("http://3.bp.blogspot.com/-J28017_bZoc/UHKQV6QnisI/AAAAAAAAG_E/38oflRWPZgw/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

how to add demo button

You may like to read:


Help Desk


Hope you guys liked these Demo and Download buttons. Do let us know which one you liked the most among these. Till the next widget, peace out guys!smile

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: CSS3 Lit Demo and Download Button Pairs
CSS3 Lit Demo and Download Button Pairs
http://1.bp.blogspot.com/-UQpuvfvtn_k/UHKTTLVIoqI/AAAAAAAAHAU/2K8m8uYyLU0/s320/demo+download+css3+buttons.png
http://1.bp.blogspot.com/-UQpuvfvtn_k/UHKTTLVIoqI/AAAAAAAAHAU/2K8m8uYyLU0/s72-c/demo+download+css3+buttons.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/10/css3-lit-demo-and-download-button-pairs.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/10/css3-lit-demo-and-download-button-pairs.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade