-->

Saturday, 27 July 2013

0 CSS Live Demo or Download Button with Bubble Animation for Blogger

at 04:00
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  Now click on -> Template -> Edit HTML-> Unfold code  ►

Step 3 Now Find this code ]]></b:skin>  by pressing  Ctrl + F

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj35wcwQyq5iZozFVyE0RE3QRf977YEpqRwgbMEMCoTshpnvNAjccuafvcJYxjasmX4myGZTjL4eFmR314rW1YK5vD4Ik9oawZl4j0H05UBDDecCunGoCGurk67DB3vm8qfysuX-XfX6Joi/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
Share this article :
Labels:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
 

Labels

Labels

Labels

Labels

Copyright © 2013. Blogger Spice - All Rights Reserved

Powered By:

Powered By Blogger Built with jQuery Built with CSS3