Download Button | How to Create Download Button in HTML

Download Button in HTML | With Button Hover Effects - Buttons are very usefull when you need to give a link to Download a file which is uploaded in any other location.

By default blogger does not have buttons ( download button, demo button etc..).

But don't worry, In this tutorial i will show you How to add download button in blogger posts.

Some free blogger templates have the button code itself. If we are using such templates we can use the buttons easily. But some other free blogger templates doesn't support buttons., So we need to edit that themes to make support the button code.

So if your free blogger template doesn't have a button code, I'll help you, Just follow my steps.

Why We Need Download Button

Most of the bloggers use Download button image and links instead of download button, And the use of images will affect the loading speed of their site. This will make a bad impact on your seo Since google gives very importance to the speed of the websites in case of seo.

you must give Importance to the loading speed of your blog. Because, if somebody enters to your site from google search results and the site is loading very slowly, what will he do.., does he wait for to load or go to another result. mostly the user will get disappointed and jumbs to another result. And It will cause increased bounce rate for your site.

So i recommend to use this simple HTML Download button instead of the images.

And more a download button can simply make your website look more professional than simply offering your download through links. A button provides a cleaner interface, and if you feel like designing your own, your buttons can be integral parts of your page’s design. Follow this guide to create Download button in HTML or make a button of your own design.

How to add HTML Download Button to blogger posts

Demo

We know by adding some HTML & CSS codes we can add new widgets to our free blogger templates. Here we are

Here also the same method using. We are going to add some CSS codes to the free blogger template.

First we need to paste this CSS code into our template
Then add the HTML code in your post where you want the download button

Now go to themes > edit HTML , click inside the code box now type ]]></b:skin>

and search. Paste the code given below above the ]]></b:skin>

 a.btn {display:inline-block;position:relative;font-family:inherit;text-decoration:none;font-weight:700;background:#30abd5;letter-spacing:.5px;padding:10px 10px;margin:10px;color:#fff;box-shadow:inset 0 0 0 #22313F;font-size:16px;text-transform:uppercase;border-radius:3px;transition:all 0.3s ease-out;}

a.btn:hover {background:#EF5223;color:#fff;}

a.btn:active {color:#EF5223;}

a.btn.warn {background:#EF5223;color:#fff}

a.btn.warn:hover {background:#30abd5;color:#fff}

a.btn.warn:active {background:#EF5223;color:#fff}

Now we want the HTML Download button in our blog posts , what we need to do for that,

Just paste the HTML Button code code given below at the place where you want to see the buttons in your post.

The Demo Button

<a class="btn warn" href="https://techfint.com/" rel="nofollow" target="_blank">Demo</a>

The Download Button

<a class="btn" href="https://techfint.com" rel="nofollow" target="_blank">Download</a>

The Demo and Download Buttons

 <a class="btn warn" href="https://techfint.com/" rel="nofollow" target="_blank">Demo</a><a class="btn" href="https://techfint.com" rel="nofollow" target="_blank">Download</a>

That All

Conclusion

I hope you liked this Article how to add Buttons in blogger post. If you have any doubts mention it in the comment section

If you liked this article Please share it with your friends.

Also read

∎ How to Remove Showing posts with label blogger
∎ How to Create Bottom Adunit in Blogger templates

∎ How to Highlight Links in Blogger Posts

blogging - 6 Years Ago

Arunkumar

A professional content writer and tech savy. He love to explore new stuff and explain it in a simple way. No matter what and how complicated it is

Disclaimer: This post may contain affiliate links that earn me a small commission, at no additional cost to you. I only recommend products I personally use and love, or think my readers will find useful.

Read other related articles