How to Create Download Button in Blogger
Welcome you guys !! I hope you see all my previous articles lets get to new. we will learn how to Simply Create Responsive Download Button or Demo Download Button in your blogger or blogspot blog by Tech Online Help.
In our previous article we explain you how you can add the most audience generator tool used by bloggers or entrepreneurs in their websites or blogs i.e. How to add push notifications on your blog. I hope that you learned to do so if not you may check it the link below:-
How to add push notifications on blog
So without wasting time lets get started and learn.
Introducing a Download responsive button like the one utilized by other blogs is very simple, you simply need to include the CSS and HTML codes underneath:
Beforehand you have introduced a awesome text style on the layout, if not please include the given link beneath/before the </head> tag in your HTML (For Search Press Ctrl+F in your keyboard)
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>After adding Font-awesome Open Template >Edit HTML< Copy the exact code and paste the code beneath or before </style> tag and save the theme afterwards. (Important)
.whitebutton {
margin: 15px auto;
padding: 18px 0;
width: 150px;
}
.whitebutton a {
background: #fff;
color: #444;
display: block;
font-size: 17px;
font-weight: 700;
font-family: 'Calibri',Verdana,sans-serif;
height: 40px;
line-height: 40px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 150px;
position: relative;
z-index: 2;
}
.whitebutton a:before {
content: '\f018';
font-family: FontAwesome;
font-weight: normal;
padding: 8px;
margin-left: -10px;
margin-right: 5px;
}
.whitebutton span {
background: #444;
color: #fff;
display: block;
font-size: 12px;
font-family: 'Calibri', Verdana,sans-serif;
height: 35px;
line-height: 35px;
text-align: center;
width: 150px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebutton .up {
background: #e25734;
margin: -20px auto;
opacity: 0;
border-radius: 0 0 3px 3px;
transform: translate(0,-50px);
transition: 270ms;
}
.whitebutton .down {
margin: -25px auto;
opacity: 0;
border-radius: 3px 3px 0 0;
transform: translate(0,-50px);
transition: 270ms;
}
.whitebutton .down:before {
content:'\f14a';
font-family: FontAwesome;
font-weight: normal;
margin-right: 4px;
color: #bbb;
}
.whitebutton:hover .up {
opacity: 1;
transform: translate(0,0);
}
.whitebutton:hover .down {
opacity: 1;
transform: translate(0,-90px);
}
.whitebuttondemo {
margin: 18px auto;
padding: 18px 0;
width: 150px;
}
.whitebuttondemo a {
background: #e25734;
color: #fff;
display: block;
font-size: 15px;
font-weight: 600;
font-family:'Calibri',Verdana,sans-serif;
height: 45px;
line-height: 45px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 150px;
position: relative;
z-index: 2;
transition: 270ms;
}
.whitebuttondemo a:before {
content:'\f002';
font-family: FontAwesome;
font-weight: normal;
padding: 6px;
margin-left: -10px;
margin-right: 5px;
}
.whitebuttondemo a:hover {
color: #fff;
}
.whitebuttondemo span {
background: #666;
color: #fff;
display: block;
font-size: 10px;
font-family: 'Calibri', Verdana,sans-serif;
height: 35px;
line-height: 35px;
text-align: center;
width: 150px;
z-index: 1;
text-transform: uppercase;
font-weight: bold;
}
.whitebuttondemo .up {
background: #666;
margin: -20px auto;
opacity: 0;
border-radius: 0 0 3px 3px;
transform: translate(0,-50px);
transition: 270ms;
}
.whitebuttondemo:hover .up {
opacity: 1;
transform: translate(0,0);
}Next step is to add Download button style in your blog posts:
♥ For people who are still use tags <br> in their post
Copy the below mention HTML code and paste in the new post on the HTML tab.
<div class="whitebuttondemo">
<a href="#" target="_blank">Download</a><br>
<span class="up">click Download</span></div>
<br>
<div class="whitebutton">
<a href="#" target="_blank">Download2</a><br>
<span class="up">click to Start</span><br>
<span class="down">10GB .exe</span></div>2. For People who are using Press "Enter" feature for a new line break in their post.
<div class="whitebuttondemo">
<a href="#">Download</a> <span class="up">click Download</span> </div>
<div class="whitebutton">
<a href="#">Download</a> <span class="up">click to Start</span> </div>
To change the desired link in above code that I have marked with hash symbol "#" replace your link you want. You can see the results of code by pressing below button link. Thank You ☺♥
Results
I assure that you have successfully added above codes to your blogger blog and see the responsive style button. if you still have any issue than let me know in the comments i will resolve the same for you - Tech Online Help
Tags
#how to create download button
#how to add like button on blogger
#direct download link wordpress
#cool download buttons
#download button png
#download button or link
#download pdf on click jquery
#download button code
#how to host a file for download
#how to create download button in blogger
#how to add download button in blogger
#add demo and download button in blogger
Comments