How To Add Stylish Demo and Download Button in Blogger Posts

 In this article today we are going to talk about Stylish Slider Demo and Download Button for Blogger.

And this Slider Demo and Download Button you can add in your Blogger Post. So we will know all these things in this article.

If you are a blogger and your blog is hosted on Blogger.com. So this article is for you. Because I have explained in this article about two buttons. Perhaps you have seen these buttons in many other blogs as well.

Just like there are many downloading websites on Blogger, you get two buttons in them. The first is Demo Button and the second is Download Button. By the way, you get a lot of code. With the help of which you can easily add these buttons to your Blogger post.

But the code I have given in this article is HTML and CSS Script. With this help, we can easily add Slider Demo and Download Button to our blog post.

That is, whenever you move the Mouse Cursor over the button, your button will slide.

So friends, now I have told you to step by step that how you can easily add Slider Demo and Download Button to your blog post? So if you want to show this button in your post, then follow the steps given below and use HTML and CSS.

Add Font To Blogger

• Open your Blogger Dashboard
• Go to Theme> Edit HTML
• Search for </head> tag
• Paste the below given code above </head> tag

 <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>  

Add CSS Code of Buttons

• Now, search for ]]></b:skin> tag 
• And, paste the below-given code above it 

 .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;  
  }  

Add HTML code in Blogger posts

Now the code we have provided below is your Stylish Slider Demo and Download Button's HTML Script. 

Add this code where you want to use Demo/Download Buttons

Just change the href="#" to your link :)

 <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>  
 <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>  

You can also use them easily.

Separate Code of Demo and Download Button

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>  

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>  

Demo - 

Demo Click here Download Click here