How to Add Animated Buttons to Blogger?

Most of the bloggers blogging on the niche Blogger templates, WP Plugins or any other downloadable thing then they have to show atleast two links i.e Demo and Download. So that bloggers just post a simple links and these links are not looking professional and gives a bad look to the blog so today I presents you Animated Buttons that can easily be added to your blogger posts. So check the Live Demo below and add this to your blog.

These button are made up by CSS3 so old browsers like IE does not support it. These buttons perfectly works on almost all major web browsers. Before starting do not forget to make a backup of your template. So here is the steps 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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0uezt4SHOmNbgO0V5LspITa9fxIrR5AXyDszJBux-i4UQbdB8dExkFpiGCQNBWsDZsxNKFBkpsCLSNbpOZsL2HCsEDStZKG5RqxXtsmgbgaPReTfQer8j0uC_XiDOSHqO_2EpD-fPMwj1/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.

To use the Buttons In Blog Posts you need to paste the following codes in the HTML Tab of Blog Posts Editor.

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 the link you want and LINKNAME with the desired 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 help for installing these buttons on your blog then just drop a comment below till then Peace, Blessings and Happy Animating.