Steps to Create Download and Demo Button
It is very easy to create a button in Blogger just follow some simple steps and you can create a stylish download and demo button in Blogger.
Step 1: Adding Font Awesome To Blogger
Look for the code </head> on your blog and place the following code just above the code </head>:
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>Step 2: Adding CSS Codes
Now, search for the code ]]></b:skin> and add the following CSS code above it.
/* CSS Demo and Download Buttons */
.bie-slide,.bie-slide2{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}
.bie-slide2{border:2px solid #36D7B7}
.bie-slide:hover{background-color:#f84f4f}
.bie-slide2:hover{background-color:#36D7B7}
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2{left:100%;margin-left:-45px;background-color:#fdfdfd;color:#f84f4f}
.bie-slide2:hover span.circle2{color:#36D7B7}
.bie-slide:hover span.title,.bie-slide2:hover span.title2{left:40px;opacity:0}
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2{opacity:1;left:28px}
.bie-slide span.circle,.bie-slide2 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%}
.bie-slide2 span.circle2{background-color:#36D7B7}
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2{position:absolute;left:65px;text-align:center;margin:0 auto;font-size:16px;font-weight:bold;color:#f84f4f;transition:.5s}
.bie-slide2 span.title2,.bie-slide2 span.title-hover2{color:#36D7B7}
.bie-slide span.title-hover,.bie-slide2 span.title-hover2{left:80px;opacity:0}
.bie-slide span.title-hover,.bie-slide2 span.title-hover2{color:#fff}If you have trouble in finding ]]></b:skin> to put the css code then you can search for the code </head> and put the css code right above the code </head> with notes must be squeezed in the code <style> --- </style>. It looks like this:
<style>
<!-- Fill in the CSS code above -->
</style>
</head>Step 3: Adding HTML to Blogger Posts
Paste the following HTML code to the blogger post where you want to add the download and demo button.
<div id="wrap" style="text-align:center">
<a class="bie-slide" 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="bie-slide2" 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>The above code is for both the demo and download buttons. If you want to add them separately then paste the code given below.
For Download Button<div id="wrap" style="text-align:center">
<a class="bie-slide2" 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>For Demo Button
<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>- You can change the words on the button to your liking by changing the 'Download / Demo' and Click Here' and others that we've marked.
- You can also easily change the icons of your liking by changing 'fa fa-download' and 'fa fa-laptop'.
