Animated Download Button for Blogger - Hi guys welcome back to another interesting tutorial. In this tutorial, I will show you how to insert an HTML Button with Animated CSS. 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 HTML 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 a simple HTML button or this 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.
How to Insert Download Button for Blogger
- Link the Font Awesome Tag
- Paste the CSS Code
- Insert the HTML code in your Post
Animated Download Button CSS Code
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
CSS Code
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 - Animated Download Button for Blogger
<div id="wrap">
<a href="https://pachathemes.blogspot.com/" 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 - Animated Download Button for Blogger
<div id="wrap">
<a href="https://pachathemes.blogspot.com/" 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://pachathemes.blogspot.com/" 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://pachathemes.blogspot.com/" 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 Animated Download Button for Blogger. 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.
0 Comments