Features of Stylish Slider CSS Demo and Download Buttons

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

दोस्तों मेने आपके  लिए डेमो और डाउनलोड का बटन बनाना  बताया हे! इसके अंदर एनीमेशन ऐड किया हे! आपके ब्लॉगर में ये बटन शो करना हे तो मेरे दिए गए स्टेप्स को फॉलो जरूर करना.

Step 1:Adding font  Awesome to Blogger
Blogger ke dashboard ko open Karo then Go to Theme>Edit Theme 
or Uske Baad search Karna he </head>
or niche Diye Code ko Copy Karna he or </head> tag search karke </head>  upper paste Karna he.

Copy Code
<script type='text/javascript'>

Related Article
//<![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 Demo & Download Buttons
Aapko Css Code theme me Add karna he. Go to Blogger Dashboard>Theme>Edit theme then Search (find) ]]></b:skin> or ]]></b:skin> iske Upper Code Paste karo
Copy Code /* CSS Demo & Download By(https://applepoint021.blogspot.com) */

.bie-slide,
 .bie-slide2 {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 170px;
  line-height: 40px;
  padding: 0;
  border-radius: 50px;
  background: #ffffff00;
  border: 2px solid #ff002b;
  margin: 10px;
  transition: all 0.5s ease-in-out;
 }
 .bie-slide2 {
  border: 2px solid #ff4f00;
 }
 .bie-slide:hover {
  background-color: #ff002b;
 }
 .bie-slide2:hover {
  background-color: #ff4f00;
 }
 .bie-slide:hover span.circle,
 .bie-slide2:hover span.circle2 {
  left: 100%;
  margin-left: -45px;
  background-color: # ffffff00;
  color: #ff002b;
 }
 .bie-slide2:hover span.circle2 {
  color: #ff4f00;
 }
 .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: #ff002b;
  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: #ff4f00;
 }
 .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: #ff002b;
  transition: .5s;
 }
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  color: #ff4f00;
 }
 .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 to Blogger posts
Apko jis bhi blogger post ke upper demo or download button chahiye to is code ko blogger ke post ke html tag me past karo maine isme 3 code diye he 1) Demo + Download 2) Demo 3) Download
Copy Code
Demo +Download
<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>

Step 4: Isme aap Apna Url de sakhte ho href="#" 
Password: https://applepoint021.blogspot.com