How To Add Together Css Present Too Download Push Inwards Blogger

Hello Folks,Today inward this article nosotros are going to explicate you lot How to Add Demo together with Download Button Using CSS together with Font Awesome.These Demo together with Download Button volition Surely increase the await of your website or blog.However powerfulness hold upwards you lot guys are using dissimilar type of Demo together with Download Buttons yesteryear using whatsoever sort of scripts or ikon link for display.But these Buttons are totally dissimilar it loads real fast because nosotros bring used pure CSS3 together with Font awesome icons.Now Day every weblog or website bring font awesome characteristic inward their website.

If you lot don't bring fontawesome characteristic don't worry,you tin forcefulness out add together them anytime.To add together font awesome read here:How to Add Font awesome icons inward my template.Demo together with download buttons come upwards alongside font awesome icons together with you lot tin forcefulness out alter the icon also if you lot want.So to add together Buttons inward your blogger template follow the steps mentioned below.

Demo

See the Pen GoPWym yesteryear (@bloggersstand) on CodePen.

How to add together demo together with download buttons alongside font awesome icon 

installation steps:

Step 1. Log inward to your Blogger concern human relationship together with 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 whatsoever trend code from below together with glue it simply earlier the ]]></b:skin> or </style> tag.
#Style 1

/* CSS Button Style yesteryear www.BloggersStanD.com */
.bsdbutton{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.bsdbutton ul{margin:0;padding:0}
.bsdbutton li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton li a.demo,.bsdbutton li a.download{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 a.download{background:#3498db}
.bsdbutton li a.demo:hover,.bsdbutton li a.download:hover{background:#666}
.bsdbutton li a.demo:active,.bsdbutton li a.download:active{cursor:pointer}
.bsdbutton li a.demo:after,.bsdbutton li a.download:after{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 a.download:after{content:'\f019'}

#Style 2 

/* CSS Button Style yesteryear www..Com */
.bsdbutton1{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.bsdbutton1 ul{margin:0;padding:0}
.bsdbutton1 li{display:inline;margin:5px;padding:0;list-style:none}
.bsdbutton1 li a.demo,.bsdbutton1 li a.download{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 a.download{background:#3498db}
.bsdbutton1 li a.demo:hover,.bsdbutton1 li a.download:hover{background:#666}
.bsdbutton1 li a.demo:active,.bsdbutton1 li a.download:active{cursor:pointer}
.bsdbutton1 li a.demo:after,.bsdbutton1 li a.download:after{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 a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate remain infinite;animation:bounceright .3s alternate remain infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Customization:

• To Change the bluish an orangish color of the button,for orangish replace f39c12 and for bluish color change 3498db with your desired color.you tin forcefulness out conduct colors from here.color bike picker tool or color code generator tool.
• To alter the Font awesome icons replace f135 , f019 and F054 with your desired buttons.To conduct the font awesome buttons visit:http://fortawesome.github.io/Font-Awesome/icons/

Step 5. Now Search for <head> by Pressing Ctrl+F keys.
Step 6.Copy the below Font Awesome Icons script together with glue it simply earlier 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.

How To Add Demo together with Download push clitoris within the post service editor

Whenever you lot practice a novel post service together with you lot wishing to add together these buttons simply click on HTML trend tab most compose trend within your post service editor together with conduct your house where you lot wishing to demo these push clitoris simply glue the whatsoever i of trend to demo the buttons within the post.

#Style 1

<div style="text-align: center;">
  <ul class="bsdbutton">
    <li><a class="demo" href="http://www.bloggersstand.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://bloggersstand.com" target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

#Style 2 

<div style="text-align: center;">
  <ul class="bsdbutton1">
    <li><a class="demo" href="http://bloggersstand.com" target="_blank">Demo Link</a></li>
    <li><a class="download" href="http://bloggersstand.com target="_blank">Download Link</a></li>
  </ul>
</div>
<div class="clear"></div>

And Publish Your Post !