Hello Friends! Welcome to Cooling Guruji Blog. And in today's article, we will know how we can put Stylish Download Button in Blogger Blog Post. Or say that whatever we are going to give you Unique and Advance Download Button Script for Blogger today.




What is Stylish Download Button for Blogger?

Friends, 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. Which makes our website more attractive.


Download Now!

Free Script

6 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 Script?

So below I have told you through stylish download button in html script, how you can easily apply this stylish download button in blogger blog post by following some steps. 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 the 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="#" target="_blank">Download Now!</a>
      <p class="up">Free Script</p>
      <p class="down"> 6 MB</p>
    </div>
	</div>

  • Now you have to paste the code by going to the html section of the new post.
  • Now publish this post of yours.
  • Your Stylish Download Button is ready.



In this code, instead of the download link (#), paste your link!

नोट –
Conclusion – So friends, you have got this How to Create Stylish Download Button for Blogger? How was the article? Do tell us by commenting below. And please share the post as much as possible.