Sunday, March 15, 2020
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.
How To Add CSS Demo And Download Button In Blogger - 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:# ;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:# } .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:'\ ';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:'\ '}
#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:# ;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:# } .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:'\ ;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
To Change the blue an orange color of the button,for orange replace f39c12 and for blue color change 3498db with your desired. color.you can choose colors from here: color wheel picker tool or color code generator toolTo change the Font awesome icons replace f135 , f019 and F054 with your desired buttons.To choose 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 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 Buttons 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="https://trickstofixblog.blogspot.com/" target="_blank">Demo Link</a></li> <li><a class="download" href="https://trickstofixblog.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="https://trickstofixblog.blogspot.com/" target="_blank">Demo Link</a></li> <li><a class="download" href="https://trickstofixblog.blogspot.com/ target="_blank">Download Link</a></li> </ul> </div> <div class="clear"></div>