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

#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;
}

Hit CTRL+F and search for ]]></b:skin> tag
CSS Part is done.

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.

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