CSS Live Demo or Download Button with Bubble Animation for Blogger - My Blogger Market

Breaking

test banner

Post Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

6/13/2013

Home Blogger Widget 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 (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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/s1600/BS+Live+Demo+Button.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_uleXvqwuGp5_wIak5V8llwoOutibK_UK4-gktDI2YoLE4mjsxJF8rpIDe36p2JvSye4Iy2qAmiR0ASwy5aXNqobTjV67jq5U4UXYZQc_aWQBXy4ydeHSxSwljKDynNSbdAqroRlCbZpK/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
Tags
Author Image

About Aamir Khan

By at
Labels:

No comments:

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Subscribe to: Post Comments (Atom)

Post Top Ad

Responsive Ads Here

Author Details

MyBloggerMarket is a blogger resources site which is a provider of high quality blogger templates, widgets and other blogger hacks with premium looking layout and robust design. The main mission of MyBloggerMarket is to provide the best quality blogger stuff for free which are professionally designed and perfectlly seo optimized to deliver best result for your blog.