Add Demo and Download button in Blogger - in this post i will share a tutorial how add cute and responsive Demo and Download button for blogger. This tutorial may help they blogging about blogger template and wordpress theme.
Demo and Download buttons are created with CSS with mouse hover effect.
Two icon are taken from fontawesome. So before staring this tutorial you
have must add fontawesome in your blog.
Before starting this tutorial please take a backup of you template for safety.
First go to Blogger Dashboard > Template > Edit HTML and put the below code before </style> tag.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}Save the Template.
Now use the below HTML Code in every post where you want share Demo and Download button.
<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>Related Article
How to eliminate screwdriver in bloggerHow to eliminate pliers and screwdriver in blog in this post i will show you how to remove the hammer and screwdriver w
How to create rollover image effectHow to create rollover image effect - In a rollover image effect when you take your mouse on a image then it will chang
Top Commentators Widget With Avatar For BloggerThe commentators are a fundamental part of any blog, since they are the ones that give life to the blog, opening and re
Download Button with two arrow
element.style {
text-transform: uppercase;
}
.bigbtn {
background-color: #5fb000;
background-image: linear