How To Add Professional Download Buttons in Blogger Post?

How To Add Professional Download Buttons in Blogger Post?

How To Add Professional Download Buttons in Blogger Post? - Hello friends, I am going to tell Mukesh Kumar 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.

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.

Try Search Engine Optimization


Download Buttons Using Html Css And Js, How To Add Download Buttons, How To Add Download Buttons In Blogger, How to create Custom Download Buttons, How To Add Download Buttons In Blogger Post, How To Add Download Buttons In Blogspot Theme, How To Create Download Buttons Using Html Css And Js, Add Download Buttons In Blogger Template, How to make a professional download buttons in Blogger Post, download buttons for blogger, Preloader, Download Buttons in Blogger, Download Buttons for Blogger,How to make custom download button in Blogger, smarttechmukesh, SmartTechMukesh, Smart Tech Mukesh : Blog