How To Add Stylish CSS Button of Demo and Download for Blogger Post


Hello friends! Today in this article we are going to talk about Add Stylish CSS Button of Demo for Blogger Post. And How To Add Stylish CSS Button of Demo for Blogger Post. We will know all these things in detail in this article. So stay with this article to know in more detail.


What is the CSS Demo Button?

If you are using a blogger platform and your blog is hosted on Blogger.com. I have explained in this article about two CSS buttons. Maybe you have seen these CSS buttons in many other blogs.


Today a number of websites are on Blogger, you get a Demo Button. You get a lot of code with the help of these codes 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 the help of this script, you can easily add the Slider Demo Button to your blogger post easily. Whenever you move the Mouse Cursor over the button, your button will slide.


How to add CSS Slider demo button in blogger Post?

I have told you step by step that how you can easily add the Slider Demo Button to your blogger post? If you want to show this button in your post, then follow the steps given below.


Step 1: Adding Font Awesome To Blogger

Now you have to open your Blogger.com Dashboard firstly. Then Go to Theme >> Edit HTML and Press Ctrl + F then search for </head>. Also, paste the below 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 Buttons

In the second step, you have to add the CSS of both buttons to your blogger template. For this also you have to click on Theme >> Edit HTML. Now again Press Ctrl + F and search for ]]>> / b: skin> in your Template. And copy the below CSS code and paste above of the ]]> </ b: skin> tag.


/* CSS Demo Buttons By (www.wikitechlibrary.com) */
.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

I have provided a code below of Stylish Slider Demo Button HTML Script. You can also use them easily.


<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">Demo</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>

Conclusion 

How did you like this article of How To Add Stylish CSS Button of Demo for Blogger Post You must give us your feedback in the comment box below.
Close[x]