How to Add Stylish Download Button in Blogger via HTML Code?

 How to Add a Stylish Download Button in Blogger with HTML Code?

Install a stylish download button on a blog post is very easy. In this article we will learn how to add a stylish download button to a blogger post using html text.

What is a Blogger Download Button?

The blogger download button is highly recommended. If you are a blogger you should know about this download button. But have you ever heard of a stylish download button. If you don’t know, let me tell you that some different features are available in the style button.

So today we will tell you in detail about the download button of the blogger script style. So let us know below. That's how we can use this stylish download button in our blogger posts.

How do you create a download button for a blogger style?

 you should  to get a stylish download button in html script, how to easily use this stylish download button for a blog post by following one step. Follow the steps given below.

       => First you have to open the blogger dashboard.

      => Now you have to click to create a new post.

      => Now you have to copy the script provided below."

<style> .abt-button{margin:50px auto;width:200px}.abt-button a{background:-moz-linear-gradient(center top ,#00b7ea 0,#009ec3 100%) repeat scroll 0 0 transparent;color:#fff;display:block;font:17px/50px Helvetica,Verdana,sans-serif;height:50px;text-align:center;text-decoration:none;text-transform:uppercase;width:200px;position:relative;z-index:2;color:#fff;font:17px/50px Helvetica,Verdana,sans-serif;text-decoration:none;text-align:center;text-transform:uppercase;background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#00b7ea),color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 0,#009ec3 100%);background:linear-gradient(top,#00b7ea 0,#009ec3 100%)}.abt-button a,.abt-button p{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 8px rgba(0,0,0,.2);-moz-box-shadow:2px 2px 8px rgba(0,0,0,.2);box-shadow:2px 2px 8px rgba(0,0,0,.2)}.abt-button p{background:#222;color:#fff;display:block;font:12px/45px Helvetica,Verdana,sans-serif;height:40px;margin:-40px 0 0 10px;position:absolute;text-align:center;transition:margin .5s ease 0s;width:180px;z-index:1;-webkit-transition:margin .5s ease;-moz-transition:margin .5s ease;-o-transition:margin .5s ease;-ms-transition:margin .5s ease;transition:margin .5s ease}.abt-button:hover .up{margin:-5px 0 0 10px!important}.abt-button:hover .down{line-height:35px!important;margin:-85px 0 0 10px!important}.abt-button a:active{background:#00b7ea;background:-moz-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(36%,#00b7ea),color-stop(100%,#009ec3));background:-webkit-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-o-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:-ms-linear-gradient(top,#00b7ea 36%,#009ec3 100%);background:linear-gradient(top,#00b7ea 36%,#009ec3 100%)}.abt-button:active .up{margin:-20px 0 0 10px!important}.abt-button:active .down{margin:-70px 0 0 10px!important} </style> <div class="abt-button"> <a href="my-link-#" target="_blank">Download Now!</a> <p class="up">Ever Free</p> <p class="down">5 MB</p> </div> </div>} <p>Now publish this post for you</p><p>Your stylish download button is ready.</p>
 
Copy it


=>Now publish this post of yours

Your stylish download button is ready.