Slide Effect Demo And Download Button

Sunday, 2 August 2015

Slide Effect Demo And Download Button

8/02/2015
How to add new slide effect demo and download button in your blog - Every blogger wants a professional button for his blogs. Because, if you have anything cool on your blog, then the visitors become attracted. The reason I'm telling you because sometimes I'm also getting attracted whenever I see something cool on a blog. So In this tutorial I'm going to show you how you can easily add a slide effect mouse hover demo download button in your blog. Follow the below instructions and add this cool button in your blog.

Add Slide Effect Demo And Download Button In Blogger

Go to your blogger dashboard - Login
Now go to the "Template" section and then click on the "Edit html" button.
After that, Copy and paste the below code just after <head>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Now find the below code by pressing "Ctrl + f " key together from you keyboard. 
]]></b:skin>

And then, copy the below css code and paste it just before ]]></b:skin>.
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:200px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.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:#F9690E; }
.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:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; 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:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:80px; }
.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; }

Now click on the orange save template button to apply the changes.

Now if you want to add the demo and download button in your post then simply switch to HTML mode and paste the below code according to your choice. (See the below image)

For Demo Button Add The Below Code

<div id="wrap">
<a class="bie-slide" href="http://www.askwithloud.com" 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 Add The Below Code

<div id="wrap">
<a class="bie-slide2" href="http://www.askwithloud.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>

For Both Buttons Add The Below Code

<div id="wrap">
<a class="bie-slide" href="http://www.askwithloud.com" 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="http://www.askwithloud.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>

See the Pen Slide Effect Demo & Download Button By Askwithloud by Prince (@Askwithloud) on CodePen.

That's it ! I hope you like this Buttons ! Stay tuned for more blogger widgets, tips and tricks! Thanks for reading @Prince.
Load comments

0 Comment to "Slide Effect Demo And Download Button"

Post a Comment