Download Button for Blogger Post | PC Week

Download Button for Blogger Post

Wednesday, January 23, 2019

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 helpful for bloggers if you have to provide an external link to your file which is hosted in any other Website 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 Post

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

Follow the below steps and insert a wonderful download button for your blogger. If you find any difficulty please feel free to contact us.

Step 1

You Should have to paste this code in between <head> tag and </head> tag. Skip this step if font awesome is already installed. 

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

Step 2

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

Step 3

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.
Stylish Download Button for Blogger
Stylish Download Button for Blogger

Demo Style 

<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

<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

Troubleshooting

If you found any error or buttons not working properly, Please double check your CSS and HTML codes properly. You can contact us for any queries or doubts, we are happy to help you.

Conclusion

I Hope that you liked this post on Download Button for Blogger Post. You can freely comment on 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.

Disclaimer : Muhammed Fasil K is a participant in the Amazon Services LLC Associates Program, an affiliate program to earn commission by advertising and linking sites to Amazon products.