Animated Download Buttons For Code Video and File For Blogger

If you write about web design, blogger or any technical topic then you definitely use codes to explain things and give an option to your users to download files so here are some animated buttons that can be used for anything like :

-To download Code and Scripts.
-To download videos.
-To download files.

There are 3 awesome designed animated buttons based on CSS and HTML that works in all browsers. When user hovers their mouse cursor on those buttons then animation starts and buttons expand themselves on mouse hover. This is done with pure CSS effect. It makes your post more professional.

How to install:
Installation is pretty easy. Place the CSS code below .You have to copy this code into your blogger template for only one time and it will work after that use separate HTML Code to use each type of button.

CSS 
Hit CTRL+F and search for ]]></b:skin> tag
Now paste the CSS Code above just before the ]]></b:skin> tag.
CSS Part is done.
#animationcss .pure { background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat; -moz-border-radius:10px; -webkit-border-radius:10px; -o-border-radius:10px; border-radius:10px; display:block; color:#212121; float:none; height:80px; width: 80px; line-height:80px; margin:10px auto 0; padding-top:1px; position:relative; text-shadow:0 1px 0 #FAFAFA; text-align:center; text-decoration:none; white-space:nowrap; -webkit-transition:width .25s ease-in-out, background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out, background-color .25s ease-in-out; -o-transition:width .25s ease-in-out, background-color .25s ease-in-out; transition:width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; -o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px; box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px; } #animationcss a span { display:none; } #animationcss:hover a span { display:inline; } #animationcss a span { font-size:1.4em; } #animationcss:hover .pure { width:420px; } #animationcss .demo { background-position:0 -80px; } #animationcss .info { background-position:0 -160px; } #animationcss .download { background-position:0 0; }

HTML
Below are 3 HTML codes for all 3 button. Now if you want to use all three buttons in one place then copy the entire code and paste it into the blogger post HTML editor. Now replace # with your links and you are done.

And for separate buttons choose for example this code

<div id="animationcss">
<a href="#" class="pure download"><span>Download Button</span></a>
</div>

So this way you can make your blogger blog more professional by adding animated download code, video and settings buttons that are based on css and html . Thanks for viewing this widget for blogger. If you like, please don't be hesitate to share or comment bellow. Thank you!