Hello friend Welcome to my blogger today I am going to tell you about a stylish CSS-Based slider demo and download button and how it adds to the blogger post.
 |
| Download and Demo button for your blogger post |
So, If you want to add this type of demo button anddownload button on your blogger. follow me and follow my following step till the end read this step by step and line by line. if you have done any mistakes and forget my step then the download and demo button does not work properly in your blogger post.so, let's get started.
what Is the CSS-Based Slider button?
It is an action button you can connect to a website and direct download link when clicking on moves over the button the action can occur and jump to the new window.
Features:
- Easy to Edit and Customize
- The hover effect is attractive
- Pure CSS and HTML coding using
- LIght weight
- The text also changes if you move the cursor over the button
- Beautiful Design
- Professional looks for blogger post
- Awesome font icon used
If you are hosted in your blogger its article very important for you and it help to creates these buttons so, guys we will create attractive and sophisticated animated button design using CSS and HTML shortcode this coding is totally free and you can download .we will also provide free for you
Steps For Create These Button:
Step:1 first of all open the blogger dashboard and go to the
theme>>Edit HTML section.
 |
| first step |
Step:2 by pressing CTRL+F and searching closing</head>tag,copy the following below
font stylish short code paste
above the </head>tag section.
 |
| second step |
<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:3 So, friend in the third step you have to add CSS code on
your blogger theme >>Edit HTML and
by pressing CTRL+F and search ]]></b:skin>tag,copy this code and
paste above the ]]></b:skin>tag.
/* CSS Demo & Download Buttons By Shisir xettri) */
.bie-slide,
.bie-slide2 {
position: relative;
display: inline-block;
height: 40px;
width: 170px;
line-height: 40px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #f84f4f;
margin: 10px;
transition: all 0.5s ease-in-out;
}
.bie-slide2 {
border: 2px solid #36D7B7;
}
.bie-slide:hover {
background-color: #f84f4f;
}
.bie-slide2:hover {
background-color: #36D7B7;
}
.bie-slide:hover span.circle,
.bie-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #f84f4f;
}
.bie-slide2:hover span.circle2 {
color: #36D7B7;
}
.bie-slide:hover span.title,
.bie-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.bie-slide:hover span.title-hover,
.bie-slide2:hover span.title-hover2 {
opacity: 1;
left: 28px;
}
.bie-slide span.circle,
.bie-slide2 span.circle2 {
display: block;
background-color: #f84f4f;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 30px;
height: 30px;
width: 30px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.bie-slide2 span.circle2 {
background-color: #36D7B7;
}
.bie-slide span.title,
.bie-slide span.title-hover,
.bie-slide2 span.title2,
.bie-slide2 span.title-hover2 {
position: absolute;
left: 65px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #f84f4f;
transition: .5s;
}
.bie-slide2 span.title2,
.bie-slide2 span.title-hover2 {
color: #36D7B7;
}
.bie-slide span.title-hover,
.bie-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.bie-slide span.title-hover,
.bie-slide2 span.title-hover2 {
color: #fff;
} 
third step
Step:4 Now save the theme and closing that window.
Step:5 In the last step adding the HTML portion to the blogpost. you can copy and paste this code
in the post where you want to put this stylish demo and download button
<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" target="_blank">
<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 The Only Demo Button:
<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
<span class="circle"><i class="fa fa-laptop"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
For The Only Download Button:
<a class="bie-slide2" href="#" rel="nofollow" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Click here</span>
</a>
</div>
Thanks for reading this blogpost completely and
confidently you can add demo and download button on your blogger post so, write down the valuable comment or feedback and suggestion
for Improvement.
<----------------------Thank You----------------------->
Also Read:-
0 Comments