Slider Demo/Download Button For Blogger Post

 

• Features of Slider 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.

• Follow The Steps Which is Given Below To Add Demo/Download Button.

• Step 1:-

Adding Font Awesome To Blogger

So friends now you first have to open your Blogger Dashboard. Also you have to go to Theme>Edit HTML. And </head>search. Also, click save button by pasting the code below on top of this </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>  

Step 2: Adding CSS Code Of Demo And Download Buttons.

So friends in the second step you need to add CSS to your blogger template for both of these buttons. You also have to click on Theme>Edit Theme. Now you have to search the 

]]></b:skin> tag in your Template. And paste the below CSS on top of this ]]></b:skin> tag and save it.

 /* CSS Demo & 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;  
  }  

Step 3:-

Adding That Button in HTML portion to blogger posts So friends now I have provided the code below that you have the HTML Script of Stylish Slider Live Demo and Download Button. You can also use them easily.

• For Both 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>  
 <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 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>  

NOTE:- Change # with your link.