How To Add Professional Download Buttons in Blogger Post?

Hello friends, I am going to tell to all of you in this post how to add professional download button to the post.

The link text shows a good no download button. But the download button looks very good, which increases the chances of downloading your content because it has a very good look. If you want to download some content. So you can put a nice download button in the post.

I will share the html and css of the download button with all of you in this post. In this post, I have told to download the button only with the help of html css. JavaScript is not used because JavaScript reduces the loading speed of the website.

Add Professional download buttons in Blog post

So friends follow all the steps given below.

Step 1 : Adding CSS

For Adding This JavaScript Go to theme > Edit Html > Then Search For </head> and paste the JavaScript just above/before the </head>.

<style type='text/css'>* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}

.buttons {

    margin: 0%;

    text-align: center;

}

.btn-hover {

    width: 200px;

    font-size: 16px;

    font-weight: 600;

    color: #fff;

    cursor: pointer;

    margin: 20px;

    height: 55px;

    text-align:center;

    border: none;

    background-size: 300% 100%;

    border-radius: 50px;

    moz-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    -webkit-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

.btn-hover:hover {

    background-position: 100% 0;

    moz-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    -webkit-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

}

.btn-hover:focus {

    outline: none;

}

.btn-hover.color-1 {

    background-image: linear-gradient(to right, #25aae1, #40e495, #30dd8a, #2bb673);

    box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);

}

.btn-hover.color-2 {

    background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);

    box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);

}

.btn-hover.color-3 {

    background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);

    box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);

}

.btn-hover.color-4 {

    background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516);

    box-shadow: 0 4px 15px 0 rgba(252, 104, 110, 0.75);

}

.btn-hover.color-5 {

    background-image: linear-gradient(to right, #0ba360, #3cba92, #30dd8a, #2bb673);

    box-shadow: 0 4px 15px 0 rgba(23, 168, 108, 0.75);

}

.btn-hover.color-6 {

    background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);

    box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);

}

.btn-hover.color-7 {

    background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);

    box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);

}

.btn-hover.color-8 {

    background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);

    box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);

}

.btn-hover.color-9 {

    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);

    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);

}

.btn-hover.color-10 {

        background-image: linear-gradient(to right, #ed6ea0, #ec8c69, #f7186a , #FBB03B);

    box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);

}

.btn-hover.color-11 {

       background-image: linear-gradient(to right, #eb3941, #f15e64, #e14e53, #e2373f);  box-shadow: 0 5px 15px rgba(242, 97, 103, .4);

}

</style>

Step 2 : Adding This HTML On Blog Post

For adding This html Go to post > HTML View > And Use This HTML To Add Download Buttons. This is 11 Type of Coloured Buttons

<div class="buttons"><button class="btn-hover color-1" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-2" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-3" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-4" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-5" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-6" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-7" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-8" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-9" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-10" onclick="window.open('#')">Download</button></div>

<div class="buttons"><button class="btn-hover color-11" onclick="window.open('#')">Download</button></div>

Conclusion:

Friends, I have told all of you to put download button in blog post in this post. How do you like this post to all, please comment and tell. If you have any question or have any objections from this post then please contact us.