How to Create Stylish Download Button in Blogger?

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.

Read More: How to Add a Advanced Download Timer in Blogger & WordPress?

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.

Stylish Download Button 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}-20px 0 0 10px!important}.abt-button:active .down{margin:-70px 0 0 10px!important}-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 InfoTechBot Download</p>
<p class="down">10MB</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.

Note – In this code paste your link instead of download link (#)!

I hope you have understood this post well. If there is any problem in understanding this post related to Create Stylish Download Button in Blogger or if you have any question then write in the comment box below.

Sharing Is Caring:

Hello Friends, My Name is Roton Kumar Roy (Founder) I am a Full-Time Blogger, Youtuber and Digital Marketer. I have start infotechbot.com for those people who want to learn Complete Blogging Course sitting at home for free online.

Leave a Comment