Download Button for Blogger Post | PC Week

Download Button for Blogger Post

Tuesday, October 2, 2018

Download Button for Blogger Post

Download Button for Blogger Post

Download Button for Blogger Post

Hi guys welcome back to another interesting tutorial. In this tutorial, I will show one of the awesome download button for blogger post. Download Button is very useful in Blogger if you have to provide an external link to your file which is hosted in any other drive or Server.

Most of the people use an Image file instead of the Download Button but this is not a good method and don't insert large size images which would decrease page speed and performance. So it is Highly recommended to use an Animated Download button instead of the Image file.

Download Button for Blogger is not very difficult to implement only thing you have to do is just follow below steps which are based on pure HTML and CSS. This Download Button has inbuilt CSS Hover Effects.

Stylish Download Button for Blogger

  1. Link the Font Awesome Tag
  2. Paste the CSS Code 
  3. Insert the HTML code in your Post
Keep a Backup of your theme, So you don't have to worry about Errors

Download Button for Blogger Post

Prerequisites

You Should have to paste this code in between <head> tag and </head> tag

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

This is needed for the icon inside the download button

Download Button CSS

Just Copy this code and Paste it above </style> or ]]></b:skin> and Click save

#wrap{margin:20px auto;text-align:center;}#wrap br{display:none;}.btn-slide,.btn-slide2{position:relative;display:inline-block;height:50px;width:200px;line-height:50px;padding:0;border-radius:50px;background:#fdfdfd;border:2px solid #0099cc;margin:10px;transition:.5s;}.btn-slide2{border:2px solid #efa666;}.btn-slide:hover{background-color:#0099cc;}.btn-slide2:hover{background-color:#efa666;}.btn-slide:hover span.circle,.btn-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#0099cc;}.btn-slide2:hover span.circle2{color:#efa666;}.btn-slide:hover span.title,.btn-slide2:hover span.title2{left:40px;opacity:0;}.btn-slide:hover span.title-hover,.btn-slide2:hover span.title-hover2{opacity:1;left:40px;}.btn-slide span.circle,.btn-slide2 span.circle2{display:block;background-color:#0099cc;color:#fff;position:absolute;float:left;margin:5px;line-height:42px;height:40px;width:40px;top:0;left:0;transition:.5s;border-radius:50%;}.btn-slide2 span.circle2{background-color:#efa666;}.btn-slide span.title,.btn-slide span.title-hover,.btn-slide2 span.title2,.btn-slide2 span.title-hover2{position:absolute;left:90px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#30abd5;transition:.5s;}.btn-slide2 span.title2,.btn-slide2 span.title-hover2{color:#efa666;left:80px;}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{left:80px;opacity:0;}.btn-slide span.title-hover,.btn-slide2 span.title-hover2{color:#fff;}

Insert the HTML code in your Post

Now Choose the button which you need to insert into your post and Click the HTML mode and Paste the Code by replacing with your Link.

Demo Style - Download Button for Blogger Post

<div id="wrap">
<a href="https://www.pcweek.in" class="btn-slide" target="_blank">
  <span class="circle"><i class="fa fa-rocket"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
</div>

Download Style - Download Button for Blogger Post

<div id="wrap">
<a href="https://www.pcweek.in" class="btn-slide2" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

Both the Buttons

<div id="wrap">
<a href="https://www.pcweek.in" class="btn-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a href="https://www.pcweek.in" class="btn-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>

That's All

Conclusion

I Hope that you liked this post on Download Button for Blogger Post. You can freely comment your doubts and queries below. 

This method would easily work with any theme. If you face any problem please comment below.

If you liked this article, then please share this with your friends. You can also find us on Twitter, Facebook, YouTube, and Instagram.
bm

I'm an Electronics Engineer with years of experience in Blogging and DIY Projects. I like to make new gadgets and write contents related to technology and Blogging.