How To Add CSS Demo And Download Button In Blogger

How To Add Demo And Download Buttons In Blogger template with fontawesome icon and css
Hello Folks,Today in this article we are going to explain you How to Add Demo and Download Button Using CSS and Font Awesome.These Demo and Download Button will Surely increase the look of your website or blog.However might be you guys are using different type of Demo and Download Buttons by using any kind of scripts or image link for display.But these Buttons are totally different it loads very fast because we have used pure CSS3 and Font awesome icons.Now Day every blog or website have font awesome feature in their website.
If you don't have fontawesome feature don't worry,you can add them anytime.To add font awesome read here:How to Add Font awesome icons in my template.Demo and download buttons come with font awesome icons and you can change the icon also if you want.So to add Buttons in your blogger template follow the steps mentioned below.
See the Pen GoPWym by BloggersStand (@bloggersstand) on CodePen.

How to add demo and download buttons with font awesome icon 

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 any style code from below and paste it just before the ]]></b:skin> or </style> tag.
#Style 1
/* CSS Button Style by */
.bsdbutton ul{margin:0;padding:0}
.bsdbutton li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton li a.demo,.bsdbutton li{position:relative;padding:9px 48px 9px 16px;background:#f39c12;color:#fff!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s}
.bsdbutton li{background:#3498db}
.bsdbutton li a.demo:hover,.bsdbutton li{background:#666}
.bsdbutton li a.demo:active,.bsdbutton li{cursor:pointer}
.bsdbutton li a.demo:after,.bsdbutton li{content:'\f135';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:11px;font-family:fontawesome}
.bsdbutton li{content:'\f019'}
#Style 2 
/* CSS Button Style by www.BloggersStand.Com */
.bsdbutton1 ul{margin:0;padding:0}
.bsdbutton1 li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton1 li a.demo,.bsdbutton1 li{position:relative;padding:14px 48px 14px 16px;background:#f39c12;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.bsdbutton1 li{background:#3498db}
.bsdbutton1 li a.demo:hover,.bsdbutton1 li{background:#666}
.bsdbutton1 li a.demo:active,.bsdbutton1 li{cursor:pointer}
.bsdbutton1 li a.demo:after,.bsdbutton1 li{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.bsdbutton1 li:hover a.demo:after,.bsdbutton1 li:hover{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}


Step 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below Font Awesome Icons script and paste it just before the <head> tag.
<link href='//' rel='stylesheet'/>
Step 7. Now Save your template.

How To Add Demo and Download button inside the post editor

Whenever you create a new post and you want to add these buttons just click on HTML mode tab near compose mode inside your post editor and choose your place where you want to show these button just paste the any one of style to show the buttons inside the post.
#Style 1
<div style="text-align: center;">
  <ul class="bsdbutton">
    <li><a class="demo" href="" target="_blank">Demo Link</a></li>
    <li><a class="download" href="" target="_blank">Download Link</a></li>
<div class="clear"></div>
#Style 2 
<div style="text-align: center;">
  <ul class="bsdbutton1">
    <li><a class="demo" href="" target="_blank">Demo Link</a></li>
    <li><a class="download" href=" target="_blank">Download Link</a></li>
<div class="clear"></div>
And Publish Your Post ! 

Learn trick to show display css demo buttons and download button inside the blogger template,font awesome icons implemented in the buttons to look beautiful.
Hello Folks,Today in this article we are going to explain you How to Add Demo and Download Butt...

Learn trick to show display css demo buttons and download button inside the blogger template,font awesome icons implemented in the buttons to look beautiful.

We hope this article helped you to learn How To Add CSS Demo And Download Button 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+


You Might Also Like:

Post a Comment Blogger Disqus

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

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.
Team Bloggersstand