How To Add Stylish Download Button in Blogger Website

Hey Everyone, Today in this post I am going to share an interesting tutorial on How To Add Stylish Download Button in Blogger Website. If you provide a download link of something on your blog, then you must use this stylish download button in your blog.

Creating Stylish Download Buttons on Blogs. For blogs that contain file sharing, they must provide a download link for the articles they make. To make the link interesting, it would be nice for you to replace it with the following download button to make it look more professional.

So if you want to add this Stylish Download Button to your blogger website or blog, then you must read this post completely with carefully.

How To Install Stylish Note Box in Blogger?

Step 1 :- First of All my friends, You Need to Go on Blogger.com

Step 2 :- Then Login With Your Blogger Account.

Step 3 :- Then Click on Theme Menu.

Step 4 :- After That Click on Edit HTML.

Step 5 :- Then Copy the Given CSS Code And Paste it Above the ]]></b:skin> or </style> Tag.

/* DOWNLOAD BUTTON */
.gyanidown br {display: none !important;}
.gyanidown {
margin: 0px auto;
width: 200px;
position: relative;
z-index: 1;
}
.gyanidown a {
color: white !important;
display: block;
width: 200px;
height: 50px;
background: #00897B;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}
.gyanidown a, .slide {
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.slide {
position: absolute;
z-index: -1;
display: block;
margin: -50px 0 0 10px;
width: 180px;
height: 40px;
background: #444;
color: #fff;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.gyanidown:hover .bottom {
margin: -10px 0 0 10px;
}
.gyanidown:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
.gyanidown a:active {
background: #004D40;
background: -moz-linear-gradient(top,  #00695C 36%, #0e6578 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
background: -webkit-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -o-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -ms-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: linear-gradient(top,  #4DB6AC 36%,#0e6578 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00695C', endColorstr='black',GradientType=0 );
}
.gyanidown:active .bottom {
margin: -20px 0 0 10px;
}
.gyanidown:active .top {
margin: -70px 0 0 10px;
}

Step 5 :- Then Don,t Forget To Click on Save Button To Save Your All Code..

How To Use Stylish Download Button in Blogger Post?

Step 1 :- Now Go To Your Posts Section To Create a New Post.

Step 2 :- Then Create a New Post.

Add Your Post Title And Description According To Your Choice.

Step 3 :- Then Click on HTML View.

Step 4 :- After That Copy the Code Given Below And Paste it in HTML View.

<div class="gyanidown">
<a href="#" target="_blank">Download</a><br />
<div class="slide top">Go Now!</div>
<div class="slide bottom">Size : 1kb</div>
</div>

Step 5 :- After That Do Not Forget to Publish Your Post.

All Source Code

<div class="gyanidown">
<a href="https://bit.ly/techyjeeshan" target="_blank">Download</a><br />
<div class="slide top">Go Now!</div>
<div class="slide bottom">Size : 1kb</div>
</div>

/* DOWNLOAD BUTTON */
.gyanidown br {display: none !important;}
.gyanidown {
margin: 0px auto;
width: 200px;
position: relative;
z-index: 1;
}
.gyanidown a {
color: white !important;
display: block;
width: 200px;
height: 50px;
background: #00897B;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font: 17px/50px Helvetica, Verdana, sans-serif;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
}
.gyanidown a, .slide {
-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.slide {
position: absolute;
z-index: -1;
display: block;
margin: -50px 0 0 10px;
width: 180px;
height: 40px;
background: #444;
color: #fff;
text-align: center;
font: 12px/45px Helvetica, Verdana, sans-serif;
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.gyanidown:hover .bottom {
margin: -10px 0 0 10px;
}
.gyanidown:hover .top {
margin: -80px 0 0 10px;
line-height: 35px;
}
.gyanidown a:active {
background: #004D40;
background: -moz-linear-gradient(top,  #00695C 36%, #0e6578 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00695C), color-stop(100%,#0e6578));
background: -webkit-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -o-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: -ms-linear-gradient(top,  #00695C 36%,#0e6578 100%);
background: linear-gradient(top,  #4DB6AC 36%,#0e6578 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00695C', endColorstr='black',GradientType=0 );
}
.gyanidown:active .bottom {
margin: -20px 0 0 10px;
}
.gyanidown:active .top {
margin: -70px 0 0 10px;
}

Code is Not Available!

Conclusion

Well that's great tutorial on How To Add Stylish Download Button in Blogger Website. If you have any other question related to this post then you can tell by commenting. How did you like this post, you can tell us by commenting. I hope it is Usful for All.

Getting Info...