How To Add Pure CSS Demo And Download Buttons In Blogger

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 I have used pure CSS3 and Font awesome icons.Now Day every blog or website have font awesome feature in their website.

• Installation Instructions:

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 byTechnicalMaher.Blogspot.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 by TechnicalMaher.Blogspot.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 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)}}.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 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='//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 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 buttons 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="https://technicalmaher.blogspot.com/" target="_blank">Demo Link</a></li>    <li><a class="download" href="https://technicalmaher.blogspot.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...
Sharing Is Caring! Share if you like :)