3 Animated Download Button For Code Video and File For Blogger

Rohan Mod
1 Aug, 2013

Animated Button for Download, Video, Code and anything Fully customizable Widget for blogger. Based on CSS that expands on hover.

3 Animated Download Button For Code Video and File For Blogger
3 Animated Download Button For Code Video and File For Blogger 

VIEW DEMO



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.



We have designed 3 awesome 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 .


1

How To Install ?

Installation is pretty easy. I am giving a 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. I will explain it in more detail below.

➨ First Download the CSS Code and copy this code.
CSS

DOWNLOAD CSS CODE


➨ Now Got to your blogger dashboard.
➨ Click on template then edit html.
➨ Hit CTRL+F and search for
]]></b:skin>

➨ Now paste the CSS Code that you downloaded before just above the
]]></b:skin>

➨Ok so CSS Part is done.
2

To Use all 3 buttons.


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. Noe replace # with your links and you are done.
<div id="animationcss">
<a href="#" class="pure demo"><span>Button For Video</span></a>
</div>

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

<div id="animationcss">
<a href="#" class="pure info"><span>Setting Button</span></a>
</div>
A

Code For Download video button.


Simply copy the html code and paste in your blogger HTML Editor. Insert your file link on the place of #.
<div id="animationcss">
<a href="#" class="pure demo"><span>Button For Video</span></a>
</div>

B

Code for Download Code button.


Same process like the first one. Copy the below code and paste it into the blogger html editor and insert your file link on the place of #.
<div id="animationcss">
<a href="#" class="pure download"><span>Download Button</span></a>
</div>
C

The code for setting button.


Copy the below html code and paste in html editor of blogger post editor. And insert your link on the place of #.
<div id="animationcss">
<a href="#" class="pure info"><span>Setting Button</span></a>
</div>
Note - If you want to use all buttons like the image then choose the code from point no.2. And for separate buttons choose point no. A, B and C. 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. Please give me your feedback.

More Blogger Widgets and Tips:-

Tabbed social media widget for blogger.
Facebook like and google plus below post title widget for blogger.
Window effect social media sharing widget for blogger.
Next Post Previous Post