Home
Blogger

CSS Live Demo or Download Button with Bubble Animation for Blogger

CSS Live Demo or Download Button with Bubble Animation for Blogger
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

 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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC0DPix23CO8EC4pXD9z19OcdW62Yt1tGwcZgMyDg6lmiwo6VPFGzp53ftCnIR4rL4hx8FBAKqbJfqN97junhG41r4pCCNLmCmdgzUcO2XgQ1b-m7_ZOd8fm_4qnA0p29Wh779E2ap7Ma/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

6 comments

  1. 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
  2. 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.
  3. I can't copy HTML cord?
    • Hi Thisaru
      Sorry for inconvenience, Now you can copy the HTML code. :up
Go Up