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.

• LIVE DEMO

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

Now paste the CSS Code above just before the ]]></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>

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!

Tooltip Effect Navigation Menu Widget For Blogger

Tooltip effect navigation menu bar widget for blogger. It displays the name of the icon when you hover your mouse over the icon on the menu. Created in HTML and CSS.

This navigation menu is created in html and css. Below is the download icon through which you can download the entire full code. You have to copy the complete code of this widget and paste it in the gadget and you are done. It works fine with almost every browser. So use it freely and make your blogger template more attractive and user friendly. by avdhootblogger

• LIVE DEMO

How to add this navigation menu widget to blogger.

• Go to blogger.
• Go to layout.
• Click on add a gadget.
• Choose HTML/Javascript box.
• Copy the below code after downloading it.
• And paste the code into an HTML/Javascript gadget.

That's all. You are done.

Html code customization

As you can see in the code. There are two layers of menu. The first is with the icons and second is with the text.

If you want to change the icon than replace the default icons with your icons.
And if you want to change the text then replace the default like home, blog, action and others with your texts.

<nav>
<menu>
<li><a href="#">☀</a></li>
<li><a href="#">✈</a></li>
<li><a href="#">❄</a></li>
<li><a href="#">☎</a></li>
</menu>
</nav>
<nav class="menu2">
<menu>
<li><a href="#">HOME</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ACTION</a></li>
<li><a href="#">NEWBIE</a></li>
<li><a href="#">SLOW</a></li>
</menu>
</nav>

• DOWNLOAD CODE

You can see the icon of flower, airplane and telephone. You can change this with yours and in menu 2 you can change home, blog, action, newbie and slow with your own.

It has tooltip effect when you hover your mouse over the icon all the text and icon move towards the up and their background become brighter and it is called tooltip effect.

Save Template and that's it. Now Tooltip Effect Navigation Menu Widget For Blogger should appear everywhere. Enjoy, share, comment! Thanks

Credits: Avdhootblogger

Minima

LIVE DEMO|DOWNLOAD

Older Themes - Probama

LIVE DEMO|DOWNLOAD