Today in this post we will learn how to add Stylish Demo and Download Button. You must have seen many such blogs and websites which have different types of Demo and Download Buttons.
Read More: How to create a Custom Redirect for a Blog Post in Blogger
If you also have such a downloading blog or website, then this post is very useful for you. After reading this post you will easily install the Stylish CSS Slider Demo And Download Button in your blog.
How This Demo And Download Button Work
This Demo And Download Button is made up of HTML and CSS, meaning it is the script of both. Whenever the mouse cursor is moved on these buttons, these buttons slide and create a very amazing hover effect that makes your blog stylish.
How to Add Demo & Download Button In Blogger Post
Even if you do not know about coding, you can add Demo and Download Button to your blog. It is very easy to add a Demo and Download Button in Blogger Blog Post.
The information of which is given step by step in this post, if you follow the steps given below correctly, then definitely there will be Demo and Download Button Show in your blog.
Step 1. First of all copy of the code is given below
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>
Step 2. Now open your Blogger Dashboard and click on Theme.
Step 3. Now click on Edit HTML but keep in mind that before changing the code, take a backup of the template.
Step 4.Now search the </head> tag and paste the code just copied above </head>.
Step 5. Now copy the CSS code given below to add Stylish Demo and Download Button.
#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 #ff0000;
margin: 10px;
transition: .5s;
}
.btn-slide2 {
border: 2px solid #0000ff;
}
.btn-slide:hover {
background-color: #ff0000;
}
.btn-slide2:hover {
background-color: #0000ff;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #ff0000;
}
.btn-slide2:hover span.circle2 {
color: #0000ff;
}
.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: #ff0000;
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: #0000ff;
}
.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: #0000ff;
transition: .5s;
}
.btn-slide2 span.title2,
.btn-slide2 span.title-hover2 {
color: #0000ff;
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;
}
Step 6. Now go to Theme >Edit Html and paste this code just above ]]></b:skin> and save the theme.
Add Demo And Download Button
Now to show the Demo and Download Buttons in the post, one more code has to be added to the written post, for this follow the steps given below –
Step 1. First of all copy of the code is given below
<div id="wrap"> <a class="btn-slide" href="#"> <span class="circle"><i class="fa fa-rocket"></i></span> <span class="title">Demo</span> <span class="title-hover">Click here</span> </a> <a class="btn-slide2" href="#"> <span class="circle2"><i class="fa fa-download"></i></span> <span class="title2">Download</span> <span class="title-hover2">Click here</span> </a> </div> </div>
Step 2. Now open the post in which you want to put Demo and Download Button.
Step 3. Now select HTML and paste this code where you want to put Demo and Download Button.
Step 4. Now put the Demo link in place of the first ‘#’ and the Download Link instead of the second ‘#’.
For example, suppose I want to add Buttons to the post shown in the image below, then I will first convert it to HTML View so that I can paste the codes.
Now I have to put the buttons below the shown paragraph, then I will search these lines in HTML view and after the lines, I will copy the codes as shown in the image.
Now in place of # I will paste my Demo and Download Links. In this way, I add these Buttons to my blog and you can also add Demo & Download Buttons very easily by following this method.
I hope after reading this post, Stylish CSS Demo and Download Button would have been added to your blog.
After seeing and reading this post, you might find this process very tough, but if you read it carefully and follow the steps correctly, then you will not face any problems in adding Stylish Demo and Download Button.