How To Add Stunning Slide Demo And Download Buttons In Blogger

0
How To Add Slide Demo And Download Button In Blogger
Hello Folks,Today we are here with another stunning Sliding Demo and Download Buttons For your template.In previous post we have talked about How to Add CSS Demo and Download Button With Hover Effect.We have added font awesome icons in buttons to look more beautiful and also suits your blog niche.We have used pure CSS for buttons,you can change the color and font awesome icon on these slide demo and  download buttons.However you guys are using another type of buttons with image source etc but these buttons are very unique and load very fast with your page speed.So to grab these Demo and Download Buttons follow the steps mentioned below.

Demo

See the Pen YwdYOp by BloggersStand (@bloggersstand) on CodePen.

How to Embed Sliding Demo and Download Buttons In Blogger Template

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
/* Demo and Download Buttons by www.BloggersStanD.com */
#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.bsd-btn-slide, .bsd-btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #00CC00;
    margin: 10px;
    transition: .5s;
}

.bsd-btn-slide2 {
    border: 2px solid #FF3300;
}

.bsd-btn-slide:hover {
    background-color: #00CC00;
}

.bsd-btn-slide2:hover {
    background-color: #FF3300;
}

.bsd-btn-slide:hover span.circle, .bsd-btn-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #00CC00;
}

.bsd-btn-slide2:hover span.circle2 {
    color: #FF3300;
}

.bsd-btn-slide:hover span.title, .bsd-btn-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.bsd-btn-slide:hover span.title-hover, .bsd-btn-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.bsd-btn-slide span.circle, .bsd-btn-slide2 span.circle2 {
    display: block;
    background-color: #00CC00;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.bsd-btn-slide2 span.circle2 {
    background-color: #FF3300;
}

.bsd-btn-slide span.title,
  .bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #FF3300;
    transition: .5s;
}

.bsd-btn-slide2 span.title2,
  .bsd-btn-slide2 span.title-hover2 {
    color: #00CC00;
    left: 80px;
}

.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.bsd-btn-slide span.title-hover, .bsd-btn-slide2 span.title-hover2 {
    color: #fff;
}

Customization: 

  • To change the background color,font awesome icon color and  title text color of the demo and download buttons ,change the above all highlighted hex color code values with your desired color and match with your blog or website colors.you can choose colors from here.Color wheel picker and color code generator.
Step 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below Font Awesome Icons stylesheet and paste it just before the <head> tag.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
Step 7. Now Save your template.
Note: If your Blogger template already have font awesome stylesheet the you can skip the step 5 and 6.

How to insert Demo and download buttons inside post editor

whenever you create a new post,just click on HTML tab near compose button in your post editor and choose you place where you want to display these slide buttons in your blogger just copy the code from the below and paste in your template.
<div id="wrap">
<a href="www.bloggersstand.com" class="bsd-btn-slide" 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 href="www.bloggersstand.com" class="bsd-btn-slide2" 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>

Customization: 

  • Just replace the www.bloggersstand.com with your desired demo or download item link.
learn trick to add Adding display show sliding demo and download buttons with hover effect and fontawesome icons in it.css slide demo download link buttons for blogger template.
Hello Folks,Today we are here with another s tunning Sliding Demo and Download Buttons For your...
SUMMARY

learn trick to add Adding display show sliding demo and download buttons with hover effect and fontawesome icons in it.css slide demo download link buttons for blogger template.

You Might Also Like:

We hope this article helped you to learn How To Add Stunning Slide Demo And Download Buttons In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add Stunning Slide Demo And Download Buttons In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand