5+ Demo And Download Button For Blogger 

Demo and download button are used for many purposes in our blog. When we provide any downloadable sources to our readers we use download button. We usually use demo button to demonstrate something from any external source. I have designed some demo and download button for blogger. In this article, I will show you how to add this button to your blogger blog.

This demo and download button are created by using only HTML and CSS. This simple and lightweight button design will work with any custom blogger template. So don’t worry about the competitiveness of this button. Adding this demo and download button in your blogger blog is very easy. I will show everything with the screenshot so don’t worry.

How To Add Demo And Download Button In Blogger?

We know that blogger needs more customization than other CMS. As blogger doesn’t support any plugin so we will have to add this demo and download button in our blogger blog by editing our current blogger template.

This is not so complicated. You just have to add a piece of CSS code into your blogger template. After that, you have to use a small piece of HTML code to show your demo and download button.

1. Login to your blogger account and go to “Template” section. Now you will see “Edit HTM” button. Click on it to open blogger’s template editor. Note: Keep a backup of your blogger template before editing.

2. Search for this line: ]]></b:skin>. Now copy the below CSS code and paste it right above the ]]></b:skin> line. Click on the “Save Template” button.

Demo and Download Button Style 1:

CSS Code (Main):

/* Demo Download Button By BlogOrnate
------------------------------------------------------ */
.boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.boddbtn ul {padding:0;margin:0;}
.boddbtn li {list-style:none;display:inline;padding:0;margin:5px;}
.demobtn,.downloadbtn{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demobtn {background-color: #3498db;}
.downloadbtn {background-color: #34d968}
.demobtn:hover {background-color: #2980b9;color: #fff;}
.downloadbtn:hover {background-color: #2fbd5a;color: #fff;}

Note: Replace the highlighted section with style 2, style 3, style 4 or style 5 codes to get your desired button style.

Demo and Download Button Style 2:

.demobtn {background-color: #516EAB;}
.downloadbtn {background-color: #29C5F6}
.demobtn:hover {background-color: #435B8E;color: #fff;}
.downloadbtn:hover {background-color: #26A6CE;color: #fff;}

Demo and Download Button Style 3:

.demobtn {background-color: #EB4026;}
.downloadbtn {background-color: #CA212A}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #A61B22;color: #fff;}

Demo and Download Button Style 4:

.demobtn {background-color: #444444;}
.downloadbtn {background-color: #2C3D4F;}
.demobtn:hover {background-color: #222;color: #fff;}
.downloadbtn:hover {background-color: #24313F;color: #fff;}

Demo and Download Button Style 5:

.demobtn {background-color: #E84C3D;}
.downloadbtn {background-color: #82BF57}
.demobtn:hover {background-color: #C83821;color: #fff;}
.downloadbtn:hover {background-color: #6FA34A;color: #fff;}

3. Here is the HTML code for adding the demo and download button into your blogger post. Copy the below HTML code > go to the post’s HTML mode > Paste it inside your blog post to show your chosen demo and download button.

HTML Code:

<div style="text-align: center;">
<ul class="boddbtn">
<li><a class="demobtn" href="#" rel="nofollow" target="_blank">DEMO</a></li>
<li><a class="downloadbtn" href="#" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Note:
Replace # with your own demo and download URL.

This was the complete procedure to add and use the demo and download button in your blogger blog. If you like this post then please share it and give your feedback through comment.