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.
Demo
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 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 by www.BloggersStand.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)}}
Customization:
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 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="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 !
