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

Add stylish download button in blogger blog post is very easy. In this article we will know how to we add stylish download button in blogger post using html script.

What is Download Button for Blogger?

Download button for blogger is much imparted. If you are a blogger then you must have known about this download button. But have you ever heard about stylish download button. If you do not know, then let me tell you that some different features are available in the stylish button.

Download Now!

Ever Free

5 MB

So today we will tell you in detail about stylish download button for blogger script. So let us know below. That’s how we can apply this stylish download button in our blogger post.

How to create stylish download button for blogger?

I have told you trough stylish download button in html script, how you can easily apply this stylish download button in blogger blog post by following some step. Follow the steps given below.

•             First of all you have to open blogger dashboard
•             Now you have to click on create new post
•             Now you have to copy script given below

{<div> <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>}

• Now you have to paste the code by going to the html section for the new post
• Now publish this post of yours
• Your stylish download button is ready

Note: - in this code paste your link instead of download link (#)!

Watch Video How to Add Animated Download Button in Blogger