How To Add Stunning Best Slide Demo And Download Buttons In Blogger

Today we have brought here another amazing sliding demo and download button for your favorite template.In previous post we've talked about the way to Add CSS Demo and Download Button With Hover Effect.We have added font awesome icons in buttons to seem more beautiful and also suits your blog niche.We have used pure CSS for buttons,you can change the colour and font awesome icon on these slide demo and download buttons.However you guys are using another sort of buttons with image source etc but these buttons are very unique and cargo in no time together with your page speed.So to grab these Demo and Download Buttons follow the steps mentioned below.

Now we will download the button on the Blogger template along with how to embed the sliding demo:
installation steps:
Step 1. Log in to your Blogger account and attend your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now look for  </style>  or   ]]></b:skin> by Pressing Ctrl+F keys.
Step 4. Step 4. Copy code and paste it just before the  </style>   or      ]]></b:skin>  

Code 1

#wrap { margin: 20px auto; text-align: center; } #wrap br { display: none; } .btn-slide, .btn-slide2 { position: relative; display: inline-block; height: 50px; width: 200px; line-height: 50px; padding: 0; border-radius: 50px; background: #fdfdfd; border: 2px solid #0099cc; margin: 10px; transition: .5s; } .btn-slide2 { border: 2px solid #efa666; } .btn-slide:hover { background-color: #0099cc; } .btn-slide2:hover { background-color: #efa666; } .btn-slide:hover span.circle, .btn-slide2:hover span.circle2 { left: 100%; margin-left: -45px; background-color: #fdfdfd; color: #0099cc; } .btn-slide2:hover span.circle2 { color: #efa666; } .btn-slide:hover span.title, .btn-slide2:hover span.title2 { left: 40px; opacity: 0; } .btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 { opacity: 1; left: 40px; } .btn-slide span.circle, .btn-slide2 span.circle2 { display: block; background-color: #0099cc; color: #fff; position: absolute; float: left; margin: 5px; line-height: 42px; height: 40px; width: 40px; top: 0; left: 0; transition: .5s; border-radius: 50%; } .btn-slide2 span.circle2 { background-color: #efa666; } .btn-slide span.title, .btn-slide span.title-hover, .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { position: absolute; left: 90px; text-align: center; margin: 0 auto; font-size: 16px; font-weight: bold; color: #30abd5; transition: .5s; } .btn-slide2 span.title2, .btn-slide2 span.title-hover2 { color: #efa666; left: 80px; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { left: 80px; opacity: 0; } .btn-slide span.title-hover, .btn-slide2 span.title-hover2 { color: #fff; }

Code 2

How to demo and download buttons inside the post editor whenever you create a replacement post of your choice,just click on HTML tab near compose button in your post editor and choose you place where you would like to display these slide buttons in your blogger just copy the code from the below and paste in your template.

 <blockquote class="tr_bq"> 

   <div id="wrap">

<a class="btn-slide" href="https://masudcomputerbd.blogspot.com" target="_blank">

  <span class="circle"><i class="fa fa-rocket"></i></span>

  <span class="title">Demo</span>

  <span class="title-hover">Click here</span>

</a>

<a class="btn-slide2" href="https://masudcomputerbd.blogspot.com" 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>

 </blockquote>

Customization:

 Just replace the https://masudcomputerbd.blogspot.com with your desired demo or download item link.

Newer post Older post

ads1

পরিচিতদেরকে জানাতে শেয়ার করুন

ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।

ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।

ডোমেইন চেকার এই লিংকে চাপ দিন ।

আপনার জন্য আরো কিছু পোস্ট