Search Box by All Blogger Tricks

Sunday, 8 September 2013

Animated Buttons Widget for Blogger


Freelance Jobs


Bubble ButtonsHere I present you Buttons which Bloggers often need in there blogs to redirect to demo or download page. These buttons make your simple links more attractive. You can see the the demo by clicking on the below button.


    These button use CSS3 so old browsers like IE would not support it. These buttons work on almost all major browsers. Before starting do not forget to make a backup of your template. So here is the tutorial for adding these buttons to your blogger blog.

    First of all we have to add CSS. Copy the below CSS code and paste it just above  ]]></b:skin> 
.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-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;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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.button:hover {background-color: #63c7fe;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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 {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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.button:hover {background-color: #89d228;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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 {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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.button:hover {background-color: #ec9732;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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 {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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.button:hover {background-color: #b6bbc0;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10FHJVGkAdEq1XGCsxOVKgakU8JLt5NpNHuWGOaMKfKLPtbizEh97lrXMJMnMeTvStC93QxRF4GAJKeJ09inmpRB0mPv_z0apty6-zuESBWlakhPjb-rSCobS0DxKEEwzstjL6Ow_aLpm/s144/button_bg.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));}


After adding this code Save your template.

Then add the below HTML where you want these buttons to appear. I have arranged these buttons according to there sizes. You just have to add them in the post or the template wherever you want.


HTML FOR LARGE SIZED BUTTONS 



<a class="button big blue" href="LINK">LINKNAME</a>
<a class="button big green" href="LINK">LINKNAME</a>
<a class="button big orange" href="LINK">LINKNAME</a>
<a class="button big gray" href="LINK">LINKNAME</a>




HTML FOR MEDIUM SIZED BUTTONS 



<a class="button blue medium" href="LINK">LINKNAME</a>
<a class="button green medium" href="LINK">LINKNAME</a>
<a class="button orange medium" href="LINK">LINKNAME</a>
<a class="button gray medium" href="LINK">LINKNAME</a>


HTML FOR SMALL SIZED BUTTONS 



<a class="button small blue" href="LINK">LINKNAME</a>
<a class="button small green" href="LINK">LINKNAME</a>
<a class="button small orange" href="LINK">LINKNAME</a>
<a class="button small gray" href="LINK">LINKNAME</a>

Replace LINK with your desired link and LINKNAME with the text you want to be written on the button.

Thats it. Its not too hard to set it up. If you want any kind of assistance or help for installing these buttons on your blog then just drop a comment below.
<<<<<****************************************************************>>>>>
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible

0 comments
Labels: , ,

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved