Welcome Bloggers, Want to Add Stylish Download button in blogger post or need stylish download button HTML code for blogger then you are at the right post. In this tutorial, we will know how to add download button in blogger also I will share many animated download button HTML code for blogger.
To create a download button on blogger we need some knowledge of HTML & CSS, If you don't have then don't worry just follow the proper steps for adding HTML code to a Download button for Blogger & WordPress.
In this article, I will be sharing the most stylish download link button HTML codes for bloggers or you can use on any website. So let's know the steps to create an animated download button for bloggers using HTML and CSS and make our download button attractive than before.
Want to Add automatic table of contents in blogger to increase SEO then visit our tutorial.
stylish download button HTML code for blogger |
How do I add a download button on Blogger?
Adding a download button on blogger is not that simple we need to use the download button HTML and CSS code in the blogger post. Also, there are two ways to do that like using an HTML button or image download link both act the same for downloading content using the link. So In this article I first mentioned steps to create a stylish download button in blogger then I provided different types of animated download button HTML code.
Features of Stylish CSS Demo and Download Button HTML code
There are many advanced features of the slider demo CSS button some of them are listed down.
- Looking beautiful and professional
- Increase revenue by good Ads placement
- Better user experience to identify the link
- Pure CSS based lightweight
- Smooth animation
- Cool hover effects
- Text style and effects
- Easy to customize
- and many more features of free CSS and HTML download buttons
Now time to know the proper steps and actual CSS and HTML code of the download button.
Steps to add Download Button HTML code for Blogger
For adding a stylish download button for blogger or animated download button HTML on the website follow the below steps carefully. Below is an example of one download button in blogger with proper steps so you can follow the same steps for each download button HTML code.
The following steps below will guide you on adding CSS code to your Blogger theme and HTML code to your blog post.
Adding free CSS and HTML download buttons Code
Follow below simple steps to make the download button CSS on blogger posts.
- Visit Blogger Dashboard
- Open the theme Section from the sidebar then click the Edit HTML Option.
- Now Press Ctrl+F and Find the <head> Tag and paste the Font Awesome Stylesheet link and the first thing to check is whether your blogger template contains font awesome or not If already there then ignore it else add it.
Important Note: You can find many different types of HTML code for the download buttons and many of them are not using font awesome. So, don't paste the below link if the download button is not using it as it will be mentioned in the CSS section.
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
Now main step adding CSS to the blogger template so again search for </head> tag and paste just above that and Save your template.
You make like our: URL Shortener Blogger Template
Adding download button HTML code in blogger posts
Open a blog post where you want to create a cool download button. Final Step to Paste the Below Post Html code to Add a download button in the article.
HTML and CSS code available from below different types of buttons
Now finally you know how to add a download button in blogger so use below Stylish CSS Download Buttons with different CSS & HTML codes. Use the one that best meets your criteria.
Free CSS and HTML download buttons
Below are some useful stylish download buttons for bloggers or animated download button Html use in any website. Copy from the below code section and first check normally via creating a blank HTML file. Preview it and use it in blogger posts.
Animated download button for blogger
Simple and attractive smooth transition download button code.
<style>
.arp-buttonno1 {
margin: 50px auto;
width: 200px;
}
.arp-buttonno1 a {
background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
color: white;
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;
/*TYPE*/
color: white;
font: 17px/50px Helvetica, Verdana, sans-serif;
text-decoration: none;
text-align: center;
text-transform: uppercase;
/*GRADIENT*/
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.arp-buttonno1 a, .arp-buttonno1 p {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-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);
}
.arp-buttonno1 p {
background: #222222;
color: #FFFFFF;
display: block;
font: 12px/45px Helvetica,Verdana,sans-serif;
height: 40px;
margin: -40px 0 0 10px;
position: absolute;
text-align: center;
transition: margin 0.5s ease 0s;
width: 180px;
z-index: 1;
/*TRANSITION*/
-webkit-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-o-transition: margin 0.5s ease;
-ms-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.arp-buttonno1:hover .up {
margin: -5px 0 0 10px !important;
}
.arp-buttonno1:hover .down {
line-height: 35px !important;
margin: -85px 0 0 10px !important;
}
.arp-buttonno1 a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}
.arp-buttonno1:active .up {
margin: -20px 0 0 10px !important;
}
.arp-buttonno1:active .down {
margin: -70px 0 0 10px !important;
}
</style>
<div class="arp-buttonno1">
<a href="#yourdownloadlink">Download</a>
<p class="up">click to begin</p>
<p class="down">1.2MB .zip</p>
</div>
Stylish download button CSS for blogger
Now instead of providing one by one copy below 5 Button CSS and HTML code for the website.
<style>
.codebtn{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
background: #2c3e50;
}
.btn {
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
.first {
-webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
box-shadow: 0 0 40px 40px #e74c3c inset;
}
.second {
border-radius: 3em;
border-color: #1abc9c;
color: #fff;
background-image: -webkit-linear-gradient(left, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
background-position: 0 0;
background-size: 100%;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.second:hover {
background-position: 100px;
}
.third {
border-color: #3498db;
color: #fff;
box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.third:hover {
box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
}
.fourth {
border-color: #f1c40f;
color: #fff;
background-image: -webkit-linear-gradient(45deg, #f1c40f 50%, transparent 50%);
background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
background-position: 100%;
background-size: 400%;
-webkit-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.fourth:hover {
background-position: 0;
}
.fifth {
border-color: #8e44ad;
border-radius: 0;
color: #8e44ad;
position: relative;
overflow: hidden;
z-index: 1;
-webkit-transition: color 150ms ease-in-out;
transition: color 150ms ease-in-out;
}
.fifth:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 0;
height: 100%;
background: #8e44ad;
z-index: -1;
-webkit-transition: width 150ms ease-in-out;
transition: width 150ms ease-in-out;
}
.fifth:hover {
color: #fff;
}
.fifth:hover:after {
width: 110%;
}
.sixth {
border-radius: 3em;
border-color: #2ecc71;
color: #2ecc71;
background-image: -webkit-linear-gradient(top, transparent 50%, #2ecc71 50%);
background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
background-position: 0% 0%;
background-size: 210%;
-webkit-transition: background 150ms ease-in-out, color 150ms ease-in-out;
transition: background 150ms ease-in-out, color 150ms ease-in-out;
}
.sixth:hover {
color: #fff;
background-position: 0 100%;
}
</style>
<h1>Stylish Animated CSS Buttons For Blogger!!!</h1>
<div class="codebtn">
<button class="btn first">Button 1</button>
<button class="btn second">Button 2</button>
<button class="btn third">Button 3</button>
<button class="btn fourth">Button 4</button>
<button class="btn fifth">Button 5</button>
<button class="btn sixth">Button 6</button>
</div>
Animation Download button CSS code with icons
<style>
.arp-button,
.arp-button2 {
position: relative;
display: inline-block;
height: 40px;
width: 170px;
line-height: 40px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #f84f4f;
margin: 10px;
transition: all 0.5s ease-in-out;
}
.arp-button2 {
border: 2px solid #36D7B7;
}
.arp-button:hover {
background-color: #f84f4f;
}
.arp-button2:hover {
background-color: #36D7B7;
}
.arp-button:hover span.circle,
.arp-button2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #f84f4f;
}
.arp-button2:hover span.circle2 {
color: #36D7B7;
}
.arp-button:hover span.title,
.arp-button2:hover span.title2 {
left: 40px;
opacity: 0;
}
.arp-button:hover span.title-hover,
.arp-button2:hover span.title-hover2 {
opacity: 1;
left: 28px;
}
.arp-button span.circle,
.arp-button2 span.circle2 {
display: block;
background-color: #f84f4f;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 30px;
height: 30px;
width: 30px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.arp-button2 span.circle2 {
background-color: #36D7B7;
}
.arp-button span.title,
.arp-button span.title-hover,
.arp-button2 span.title2,
.arp-button2 span.title-hover2 {
position: absolute;
left: 65px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #f84f4f;
transition: .5s;
}
.arp-button2 span.title2,
.arp-button2 span.title-hover2 {
color: #36D7B7;
}
.arp-button span.title-hover,
.arp-button2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.arp-button span.title-hover,
.arp-button2 span.title-hover2 {
color: #fff;
}
</style>
<div id="wrap" style="text-align:center">
<a class="arp-button" href="#" rel="no-follow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Live Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="arp-button2" href="#" rel="nofollow" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
You can easily change the icons by changing <i class="fa fa-laptop"></i>
and <i class="fa fa-download"></i>
. Browse more font awesome icons from here.
Complete demo of above code: CSS Download Button demo
Done. You have successfully installed stylish demo buttons and download buttons in blogger. Since we made them with pure CSS and in some cases added small JavaScript, they majorly won't impact your page speed.
Also, use our new automatically create HTML sitemap page in blogger
In conclusion of Stylish Download Button HTML code for Blogger
That’s it in this article about creating an amazing and stylish download button that can be used in bloggers or WordPress or any website. In case you need more such HTML code then comment down we will try to provide more.
We are providing much useful content to you with many amazing tutorials or scripts for free, So please follow us on YouTube Channel to get all updates and more useful content.
Well, that’s it in this post, will see you again with a new and useful script for the blogger platform. I hope you like this script and share it with your friends.
Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.
2 comments
Click here for commentsHey brother first of all you need to add a real search this blog in the top because search for google is by Adsense and also you need to make a tabel only for blogger tools script, in which only tools scripts add, not like download button or any html table script, so please make this asap. cause i am a regular visitor of your site and I also use some of your html scripts, THANKS
ReplyAnd also please remove your addclick expo 2021 ads from your scripts cause it really bad for us
ReplyConversionConversion EmoticonEmoticon