How to Add Stylish CSS Slider Demo and Download Button in Blogger

Anonymous

April 03, 2024 April 03, 2024

How to Add Stylish CSS Slider Demo and Download Button in Blogger

Hello, Guys Welcome to The Kathait. Today in this post we are going to create stylish look download and demo buttons with Pure CSS and HTML in Blogger.

Features of Stylish 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

Buttons Demo

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

Note: This is an optional step, if Font Awesome is already installed on your blog then don't add these codes to your blog.

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>

Sometimes the </head> code is not found in certain templates, instead you can look for code like this: & lt; / head & gt; or & lt;! - <head /> - & gt; & lt; / head & gt;

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

If the code does not work or you’ve faced any error/problem then please download the source code files from the given download button.

Download Source Codes

Now, download and demo buttons have been completely created, if you follow all the steps correctly then we can guarantee the buttons works well. If you have any questions or parts that are poorly understood please write the question through the comment field provided.

Blogger Tips & Tricks