Animated Buttons Widget for Blogger




Animated Buttons

Here 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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySok-uTIqVE2GfojAU1FuueURcSEPxqXhma8r9Y-mwmQhTSDCXXKHz1jkc1bqicst7Xj5BhJ9sxa4GxacLDDMTSQ1m7vwByGgZxyJEc5LtbVoJ-snObmITObjAKEgWwba7BbU6-agdNwJ/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 templet.


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 Size button


<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 Size button


<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 Size button


<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> 


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

That's it. Its easy and simple to use if you face any problem just drop a comment below.


<<*********************************************************>>
I hope you enjoy with this widgets and useful for you. If you face any problem then directly interact with the official website and directly ask the developers for this widgets for solution commenting there.



facebook
google-plus
twitter
pinterest

No comments :

Post a Comment