How To Add Stylish CSS Slider Demo and Download Button for Blogger Posts

What is Stylish CSS Demo and Download Buttons?

click here for button preview

read in Engilsh or Hindi

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 in our blog post. That is, whenever you move the Mouse Cursor over the button, your button will slide.

Features of Stylish Slider CSS Demo and Download Buttons

• Pure CSS.
• Light Weight.
• Font Awesome icons used.
• A simple combo of HTML and CSS.
• Cool Hover Effect.
• The text also changes on hover.
• Easy to customize.

How to add CSS based Slider demo and download buttons in blogger?

So friends, now I have told you 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.

Step 1: Adding Font Awesome To Blogger

So friends, now you have to open your Blogger Dashboard first. Also you have to go to Theme> Edit HTML. And </head> Have to search. Also, paste the below given code above this </head> tag and click on Save Button.

<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 Code Of Demo And Download Buttons

So guys, in the second step you have to add CSS for both these buttons to your blogger template. For this also you have to click on Theme> Edit Theme. Now you ]]></b:skin> tag is to search in your Template. And the below given CSS pasting this code Above this ]]> </ b: skin> tag. and save the theme

/* CSS Demo & Download Buttons By (wondermayank) */
.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;
 }

 

Step 3: Adding HTML portion to blogger posts

So friends, now the code I have provided below is your Stylish Slider Live Demo and Download Button's HTML Script. You can also use them easily.

for both

 

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

 

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>

 

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

<div id="wrap" style="text-align:center">
<a class="bie-slide2" href="#" rel="nofollow" target="_blank">
<span class="circle2"><i class="fa fa-shopping-cart"></i></span>
<span class="title2"></span>
<span class="title-hover2">Click here</span>
</a>
</div>