Android Helping is a way to get information on Android knowledge.

CSS3 Download Button For Blogger

Are you having a blog and offering downloads of various files. Do you use download links or images no no they make your blog slower. So now you are thinking right to have a CSS3 download button with animation effect. It has some great features like it will provide information about file when you hover the mouse arrow on it. Do not worry you are thinking for its demo see At the end of post
Before going for its tutorial of how to add it let me tell a bit about it features.
  1. First of all, Easy to install
  2. Full loading
  3. Fast loading more than other links or images.
  4. Blue bubble look.
  5. Hover animation.
  6. Two lines to add.
  7. And much more...
After learning for its features you are not wait to install it let us do some installation. O my God i forget to tell that it is also fully Customizable.

Adding Css3 Download Button For Blogger.

Step no. 1 - First of all navigate to Templates section and then to Edit HTML of your blogger dashboard.
Step no. 2 - In codes search for ]]></b:skin> tag. (Tip use Ctrl+F)
Step no. 3 - Place whole the code under present above this ]]></b:skin> tag

.ET-button {
    margin: 50px auto;
    width: 200px;

 /* EasyTins download button */

.ET-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

.ET-button a, .ET-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
.ET-button p {
    background: #000;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 150px;
    z-index: 1;
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

.ET-button:hover .up {
    margin: -85px 0 0 10px !important;
.ET-button:hover .down {
    line-height: 35px !important;
    margin: -5px 0 0 10px !important;
.ET-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

.ET-button:active .up {
    margin: -20px 0 0 10px !important;
.ET-button:active .down {
    margin: -70px 0 0 10px !important;
Step no. 4 - Now click on save template.

You have successfully added the css3 of code and now is to add the download button you wish.

Step no. 5 - While in compose mode of your writing post  toggle to HTML

Step no. 6 - Place whole code below given to there
<div class="ET-button">
      <a href="FILE_URL">Download</a>
      <p class="up">Click to Start Download</p>
      <p class="down">File Size: Write here</p>
 You have done it.


As i said in second paragraph that it is fully customizable means you can change it any other button or make it download button.

To make it download button : 

  • Then you need is to change the green color FILE_URL in to the link of your file.
  • And the red color words to any thing you wish.
  • And it is now fully done.

To make it another type of button :

If you want to make it navigation or some type of button rather than download than

  • You need to change green color  FILE_URLto the destination link.
  • Blue color and red color phrases are to be changed accordingly to your requirements.
We have successfully added a CSS3 download button with animation effect to your blog.

Final Words

As i say in my every post i have tried best to provide you the required thing but i am also a man so i may have a mistake and that can be solved by your comments in comments box.
Happy Blogging



It is demo button

File Size: Write here


No comments:

Post a Comment

If you have any problem and questions related to this article then please ask them. One of our moderators will reply soon. Please keep in mind that all the comments are checked for moderation and spam ones are deleted immediately. These spam contacts also include those which are not related to this article. Thanks for understanding !

Popular Posts

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Sample Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation test link ullamco laboris nisi ut aliquip ex ea commodo consequat.


Theme Support

Need our help to upload or customize this blogger template? Contact me with details about the theme customization you need.