CSS Live Demo or Download Button with Bubble Animation for Blogger

CSS Live Demo or Download Button with Bubble Animation for Blogger

6
data:blog.title
demo button

Live Demo or Download Button is often necessary for all types of blog. If you are running a blog about blogging and widget then you must use Demo button to display your widget demo to your visitors. On the other hand if you are running media blog then you need to place a Download button thus your visitors can download media file. So I am going to share with you CSS Live Demo or Download Button which is known by many blogger but I have added extra two color button to make your Live Demo or Download Button spicy. Who is the first designer of this CSS button I am not sure but I just publishing again for my blog readers. Generally we have found this button on 4 major color such as, Blue, Green, Orange and Gray. And I have created 2 new button with Red and Purple color. So you will get here 6 animated CSS Live Demo or Download Button for your blog. So let’s proceed to the tutorial that how we can add those button in your blog. You can see the Demo from below. 


Live Demo



Step #1: Log in to your Blogger account and Go to your Blogger Dashboard

Step #2: Click on -> Template -> Edit HTML-> 

Step #3: Now Find this code ]]></b:skin>  by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step #4: Paste the below code  Before/above ]]></b:skin> 


<style>
.BloggerSpicebutton{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.BloggerSpicebutton:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.BloggerSpicebutton:active{
bottom:-1px;
}
/* The three buttons sizes by www.bloggerspice.com */
.BloggerSpicebutton.big { font-size:30px;}
.BloggerSpicebutton.medium { font-size:18px;}
.BloggerSpicebutton.small { font-size:13px;}
/* Blue Button by www.bloggerspice.com */
.blue.BloggerSpicebutton{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.BloggerSpicebutton:hover{
background-color:#63c7fe;
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button by www.bloggerspice.com*/
.green.BloggerSpicebutton{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.BloggerSpicebutton:hover{
background-color:#89d228;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button by www.bloggerspice.com*/
.orange.BloggerSpicebutton{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.BloggerSpicebutton:hover{
background-color:#ec9732;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/*Gray Button by www.bloggerspice.com*/
.gray.BloggerSpicebutton{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.BloggerSpicebutton:hover{
background-color:#b6bbc0;
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
/* Red Button by www.bloggerspice.com */
.red.BloggerSpicebutton{
color:#0f4b6d !important;
border:1px solid #FE8080 !important;
background-color: #FF0000;
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-moz-radial-gradient( center bottom, circle,
rgba(255,0,0,1) 0,rgba(255,0,0,0) 100px),
-moz-linear-gradient(#FF0000, #FE8080);
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(255,0,0,1)), to(rgba(255,0,0,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#FE8080));
}
.red.BloggerSpicebutton:hover{
background-color:#FF0000;
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-moz-radial-gradient( center bottom, circle,
rgba(255,0,0,1) 0,rgba(255,0,0,0) 100px),
-moz-linear-gradient(#FF0000, #FE8080);
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(255,0,0,1)), to(rgba(255,0,0,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#FE8080));
}
/* Purple Button by www.bloggerspice.com */
.purple.BloggerSpicebutton{
color:#CC0099 !important;
border:1px solid #FE80DF !important;
background-color: #CC0099;
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-moz-radial-gradient( center bottom, circle,
rgba(204,0,153,1) 0,rgba(221,71,284,0) 100px),
-moz-linear-gradient(#FF0000, #FE8080);
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(204,0,153,1)), to(rgba(221,71,284,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0099), to(#FE80DF));
}
.purple.BloggerSpicebutton:hover{
background-color:#CC0099;
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-moz-radial-gradient( center bottom, circle,
rgba(204,0,153,1) 0,rgba(221,71,284,0) 100px),
-moz-linear-gradient(#FF0000, #FE8080);
background-image: url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'), url('http://1.bp.blogspot.com/-TeBpzPE9g7Q/UbhJMNK0SXI/AAAAAAAADfg/zklNv_dv_84/s1600/BS+Live+Demo+Button.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(204,0,153,1)), to(rgba(221,71,284,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CC0099), to(#FE80DF));
}
</style>

Step #5: Now hit the save button.

How to Use?

In new Post choose HTML mode instead of Compose the Paste the code from below


bubble button


<a class="BloggerSpicebutton big orange" href="http://www.bloggerspice.com/" rel="nofollow" target="_blank">Live Demo</a>

Customization 

  • Change big with small or medium to use small and medium size button
  • Change orange with red, purple, gray, green, blue (case sensitive)
  • Replace http://www.bloggerspice.com/ with your Demo URL
  • Change Live Demo according to your own
CSS Live Demo or Download Button with Bubble Animation for Blogger
4 Stars stars - "CSS Live Demo or Download Button with Bubble Animation for Blogger " Live Demo or Download Button is often necessary for all types of blog. If you are running a bl...

This is really nice bro Mohammad. I really appreciate your hard working on keeping your readers engaged. Keep up the good work..

Read:- Top 5 Best Alternatives For Google Adsense

you are always welcome bro..all my time and effort I dedicate for my loyal readers and visitors

Hey!! Thats Amazing bro!!! Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!Thank you!!!

Wow!! Roel you are most welcome for so many thanks.

I can't copy HTML cord?

Hi Thisaru
Sorry for inconvenience, Now you can copy the HTML code. :up

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *