Add Demo and Download Button In Blogger – In my previous tutorial, I showed you How to add an HTML download button in blogger. In this tutorial, you are going to learn How to add a stylish CSS3 Demo and Download Button with hover effect in blogger. Demo and Download buttons are used for many purposes in any blog. Demo button is used to get an idea of the final outcome of the subject matter, whereas a Download button is used in a blog to download information by the readers. Today in this tutorial I am going to provide you with 7 best pure CSS3 light coded demo and download button with hover effect for Blogspot blogger blog.
- Custom Related Post Widget for Blogger.
- Responsive Social Share Button for Blogger.
- Best Email Subscribe widget for Blogger.
- 10 Best Popular Blogger Widgets and Plugins (Beautiful)
- 35+ Drop Down Menu Widget in Blogger Horizontal Menus CSS & CSS3
What the Use Of Demo and Download Button In Blogger?
- Demo Button – Demo button is a clickable button in blogger which is used for demonstrating an overview of any tutorial or widget. Websites providing widgets and templates need a clickable button for their visitors to give them an idea about how a widget or template looks like. Also, a blog having demo button for a tutorial post instead of anchor link text provides a great user experience to the visitors.
- Download Button – Download button is a clickable button in blogger which is used for downloading purpose.
How This Demo And Download Button Work?
This demo and download button are created by using HTML and CSS also some were simple lightweight jQuery demo and download buttons This simple light coded HTML/CSS demo and download button will work with any blogger template custom either custom or bloggers official template. Among the 7 designs, in one of the demo and download button when you face your mouse towards the demo or download button, you will see an amazing animated hover effect on another button you will see two smaller eyes on the download button. These eyes were made using font awesome icon. Same as other buttons were also equipped with the animated slider demo and download buttons with hover effect. So let’s get into the tutorial to know how to add stylish demo and download button in blogger.
How to Add Demo and Download Button in Blogger?
Adding demo and download button in blogger is very simple. Any newbie with zero coding knowledge can add these piece of codes to their blog. Since blogger doesn’t support any plugins we have to add this piece of codes manually in our blogger template by editing HTML and CSS. Don’t be scared of playing with codes in your template, you will be provided with step by step guide with detailed screenshots to add these HTML/CSS code for demo and download button in your blogger template.
STEP 1: Login to your blogger dashboard and select your blog on which you want to add demo and download button.
STEP 2: Then go to Template > Edit HTML.
[NOTE: It is highly recommended you to keep a backup of your template before changing any code]
STEP 3: Then press anywhere inside your code area and press CTRL+F a search box will pop up in the top right corner inside your code area then type ]]></b:skin> and press enter.
STEP 4: Now among the 7 styles of Demo and Download Button choose the style which you like to add in your blog and paste that code above ]]></b:skin>.
Demo and Download Button Style 1
CSS CODES FOR STYLE 1
.body {
margin: 50px;
font-family: helvetica, sans-serif;
background: #e9f0f4;
}
#wrap {
margin: 20px auto;
text-align: center;
}
.btn-slide, .btn-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #ooo000;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #efa666;
}
.btn-slide:hover {
background-color: #0099cc;
}
.btn-slide2:hover {
background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.btn-slide2:hover span.circle2 {
color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.btn-slide2 span.circle2 {
background-color: #efa666;
}
.btn-slide span.title,
.btn-slide span.title-hover, .btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
color: #fff;
}
Demo and Download Button Style 2
CSS CODES FOR STYLE 2
.post-body ul.button {
list-style: none;
text-align: center;
margin: 20px auto;
padding: 2px;
font-size: 14px;
clear: both;
z-index: 2;
}
.post-body ul {
position: relative;
display: block;
padding: 0;
margin: .5em 0 .5em 1.5em;
text-decoration: none;
}
.button {
list-style: none;
text-align: center;
width: 95%;
margin: 10px;
padding: 2px;
font-size: 14px;
clear: both;
}
Demo and Download Button Style 3
CSS CODES FOR STYLE 3
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
Demo and Download Button Style 4
CSS CODES FOR STYLE 4
/* Demo Download Button By Ranadil.blogspot.com
—————————————————— */
.howtofact {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;}
.howtofact ul {padding:0;margin:0;}
.howtofact li {list-style:none;display:inline;padding:0;margin:5px;}
.demo,.download{color:#fff !important;padding:12px 15px !important;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;}
.demo {background-color: #3498db;}
.download {background-color: #34d968}
.demo:hover {background-color: #2980b9;color: #fff;}
.download:hover {background-color: #2fbd5a;color: #fff;}
Demo and Download Button Style 5
CSS CODES FOR STYLE 5
/* Starting Css To DEMO &amp;amp; Download Button */
#m-wrap {
margin: 10px auto;
text-align: center;
}
#m-wrap br {
display: none;
}
.egg-btn-slide, .egg-btn-slide2, .egg-btn-slide3 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 0px;
background: #fdfdfd;
border: 2px solid #009688;
margin: 10px;
transition: .5s;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
}
.egg-btn-slide2 {
border: 2px solid #8BC34A;
}
.egg-btn-slide3 {
border: 2px solid #f73d00;
}
.egg-btn-slide:hover {
background-color: #009688;
}
.egg-btn-slide2:hover {
background-color: #8BC34A;
}
.egg-btn-slide3:hover {
background-color: #f73d00;
}
.egg-btn-slide:hover span.circle, .egg-btn-slide2:hover span.circle2, .egg-btn-slide3:hover span.circle3 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
}
.egg-btn-slide:hover span.circle{
color: #009688;
}
.egg-btn-slide2:hover span.circle2 {
color: #8BC34A;
}
.egg-btn-slide3:hover span.circle3 {
color: #f73d00;
}
.egg-btn-slide:hover span.title, .egg-btn-slide2:hover span.title2, .egg-btn-slide3:hover span.title3 {
left: 40px;
opacity: 0;
}
.egg-btn-slide:hover span.title-hover, .egg-btn-slide2:hover span.title-hover2, .egg-btn-slide3:hover span.title-hover3 {
opacity: 1;
left: 40px;
}
.egg-btn-slide span.circle, .egg-btn-slide2 span.circle2, .egg-btn-slide3 span.circle3 {
display: block;
background-color: #009688;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.egg-btn-slide2 span.circle2 {
background-color: #8BC34A;
}
.egg-btn-slide3 span.circle3 {
background-color: #f73d00;
}
.egg-btn-slide span.title,
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2,
.egg-btn-slide3 span.title3, .egg-btn-slide3 span.title-hover3 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #009688;
transition: .5s;
}
.egg-btn-slide2 span.title2,
.egg-btn-slide2 span.title-hover2 {
color: #8BC34A;
left: 80px;
}
.egg-btn-slide3 span.title3,
.egg-btn-slide3 span.title-hover3 {
color: #f73d00;
left: 80px;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
left: 80px;
opacity: 0;
}
.egg-btn-slide span.title-hover, .egg-btn-slide2 span.title-hover2, .egg-btn-slide3 span.title-hover3 {
color: #fff;
}
/* Ending Css To DEMO &amp;amp; Download Button */
Demo and Download Button Style 6
CSS CODES FOR STYLE 6
.button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:url("https://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#999999;
text-align:center;
width:150px;
}
.demobutton:hover {
background-color:#00A0EE;
}
.downloadbutton {
background-color:#91BD09;
text-align:center;
width:150px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
Demo and Download Button Style 7
CSS CODES FOR STYLE 7
.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)}}
After adding your desired Demo and Download Button CSS code in your blogger template make sure you add this code after <head> unless this demo and download button will not work in your blogger blog.
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"></link>
How to Add Demo and Download Button in Blogger Post
After successfully adding CSS code in blogger template now its time to add HTML code in blogger post editor to display stylish demo and download button.
To display Demo and Download Button In Blogger Post follow these steps:
- Login to blogger dashboard and select your blog.
- Go to All Posts > HTML.
- Paste the Code in HTML mode on blogger post where you want to display Demo and Download Button.
<div id="wrap">
<a href="URL" class="btn-slide">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
</div>
<a href="URL" class="btn-slide2″>
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
For Style 2
<div style="text-align: center;"><ul class="button"><li><a class="demo" href="URL" target="_blank"><b>DEMO</b></a></li><li><a class="download" href="URL" target="_blank"><b>DOWNLOAD</b></a></li></ul></div>
For Style 3
<div style="text-align: center;"><ul class="btn"><li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li><li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li></ul></div>
For Style 4
<div style="text-align: center,">
<ul class="howtofact">
<li><a class="demo" href="URL" rel="nofollow" target="_blank">DEMO</a></li>
<li><a class="download" href="URL" rel="nofollow" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
For Style 5
<div id="m-wrap">
<a class="egg-btn-slide" href="URL" target="_blank">
<span class="circle"><i class="fa fa-eye"></i></span>
<span class="title">Demo</span>
<span class="title-hover">View Now</span>
</a>
<a class="egg-btn-slide2" href="URL" target="_blank">
<span class="circle2"><i class="fa fa-chevron-circle-down"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Download Now</span>
</a>
<a class="egg-btn-slide3" href="URL" target="_blank">
<span class="circle3"><i class="fa fa-shopping-cart"></i></span>
<span class="title3">Buy Now</span>
<span class="title-hover3">Purchase Now</span>
</a>
</div>
</div>
For Style 6
<a class="demobutton button" href="URL" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Live Demo</span></a>
<a class="button downloadbutton" href="URL" rel="nofollow" style="float: left;" target="_blank"><span style="display: inline-block;">Download</span></a>
For Style 7
<div style="text-align: center;"> <ul class="bsdbutton1"> <li><a class="demo" href="URL" target="_blank">Demo Link</a></li> <li><a class="download" href="URL" target="_blank">Download Link</a></li> </ul></div><div class="clear"></div>
Click "Save" and you are done!
[Make sure to Change with your URL demo or download link.]
Over to you
That’s all for now; in your Blogger post, stylish demo and download button has been successfully added.
The whole process may look technical, but once you are inside the dashboard and follow all the steps mentioned above, it will be easier for you to implement.
This is how you can add stylish demo and download button in blogger. If you have any further query relating demo and download button setup comment down we are ready to help you. If you are benefitted by this article Share this article on Facebook and other social media. Comment down let me know how this demo and download button worked in your blog.
11 Comments
ya it's working. thx ! :D
ReplyDeleteNice information.... A simple way to add button to blogger post is https://htmlcodegenerator.blogspot.com/2019/11/adding-button-in-blogger-post.html
ReplyDeletenot work in my blog
ReplyDeleteawesom thats working way to add download button in blogger
ReplyDeletehttps://brandsofttech.blogspot.com/2020/04/3-reasons-to-shop-for-android-instead.html
Thanks for this Ten sports Ok new software
ReplyDelete2nd one not working ???
ReplyDeleteThanks bro
ReplyDeleteThis is Best article im also post a articledear bro carry on.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanking You ❤ for sharing this useful information. learn more about online blogging and Blogspot Templetes
ReplyDeletePlease Read . Our
ReplyDeletecontent !! ..
Median Ui Template..SEO
...SEO....Blogger Template...OTP
...Best Amp Blogger Template...Photoshop cc 2021
...Protect Your eyes from harmful blue light
...Hight DA PA Backlink...Windows 11 ...How to find specific websites to create backlinks