How to Create Demo And Download Button in Blogger 2021
About Demo And Download Button
In my previous tutorial we learn how to make a WhatsApp Chat Widget on Blogger, In this tutorial we are going to learn how to create a beautiful demo and download buttons with hover effect. Buttons are really important in blog post, There are many posts that need download buttons for their digital products to download, But you just can't give the link on your post, because it's not look professional and look kind of careless, And its also not good for Post SEO, that's why we need buttons in our post. If you are using WordPress instead of Blogger then add a button will be so easy for you, you just have to download a plugin in your WordPress dashboard and apply it to your WordPress based post that it. It's so easy and simple for WordPress user. But if you like any of these download and demo buttons then you can also use them in WordPress websites.Advantages of demo and download button
In case your website provide digital products, or you have an affiliate website then you need a button for all these products, with the button your website will not look professional and looks kind of bad. That's why I highly suggest you to add download buttons on your website, with buttons your website will look more profession and beautiful. That's why I highly suggest you to use demo and download buttons on your blog posts.Disadvantages of demo and download Buttons
In my opinion I don't think there are any disadvantages in buttons, because its make your post look more reliable and beautiful, its really import to use demo and download if you have are providing links or selling digital products. You should also add some buttons in your blog it will make your blog look more reliable and beautiful.How to add Demo and Download Button on Blogger
Its very easy and simple to add demo and download in you blogger, Don't be afraid it's not that hard as it looks, It's very easy to install Demo and Download buttons in your Blogger post with Some Simple Steps. I will be guiding you the whole process in very simple language, that will help you to ads buttons to your blogs. I am going to provide you two things 1st CSS, and 2nd HTML you just have to copy and paste to install these Demo and Download buttons.So lets start guys...
I am going to provide you Top 3 Designs of Demo And Downloads, It's all up to you which one you choose. Now lets see the process that how to create Demo And Download Button on Blogger.
Just Follow the simple process to install any of these 3 Designs of Demo and Download Buttons…
1st we are going to install CSS after that we will install HTML, So please follow the whole step very carefully.
Steps:
- Go to Blogger
- Then Click on HTML
- Before doing any changes i highly recommend you to create a backup of your blog, By Clicking on "backup"
- After that Click on Edit HTML
- Find ]]></b:skin>
- Then Copy The CSS Anyone You Like And Paste Above It.
Demo and Download Button CSS-1
CSS
.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 CSS-2
CSS
/* Demo Download Button By InfinityBlogger.in
—————————————————— */
.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 CSS-3
CSS
/* Starting Css To DEMO &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; Download Button */
To Install Demo And Download Button to your blog you must have to add HTML to your blog post or page.
Please follow the process to add Demo and Download button to your blog post.
- Go to Blogger
- Then Click on "all Post"
- Then Open the Post where you Want to Add Demo and Download button.
- Then Copy The same HTML no. of Same CSS no. which you already Install in your blogger
- Then Change to HTML View
- And Paste the HTML code in your blog and save…
That's It…
Demo and Download Button HTML-1
HTML
<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'/>
<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>
<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>
Demo and Download Button HTML-2
HTML
<center>
<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'/>
<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>
Demo and Download Button HTML-3
HTML
<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'/>
<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>
Conclusion
So Guy ! All done, Hope You guy don't face any error, But in case you ever face any errors, then feel free To Contact, me on telegram, Demo and Download button is really import for every blogger, So use it, Apply it your blog posts, and if you face any issue, then don't forget to msg me on telegram…
Post a Comment