Home
Blogger
Scripts

Best Animated Demo & Download Button Code for Blogger | Add Stylish Buttons to Your Posts

Cel7miros




Looking at the title, many people may have guessed what topic I will discuss today. Today we will share a beautiful animated Demo and Download button code for Blogger posts.

We who are blogging often have to share the download link of various files in the post. While sharing various templates and scripts, demos are provided to show their interface. In this case if we give our post a nice animated demo and download button then the post will look very nice and professional.


Button Look like this picture


Why Add Animated Buttons to Your Posts?

Adding animated buttons to your Blogger posts offers several benefits:

  • Improves Visual Appeal: Animated buttons catch the reader's attention and make your posts look more professional.
  • Increases Click-Through Rate: Well-designed buttons encourage visitors to click on your links.
  • Enhances User Experience: Interactive elements make your blog more engaging and user-friendly.
  • Professional Look: Gives your blog a premium feel without any cost.
  • Better Call-to-Action: Clearly guides visitors to take action (view demo or download).


How to Add CSS Code for Demo and Download Buttons on Your Blogger Site

Step - 1: Add Font Awesome Library

First of all, go to your blog's theme options. Then click on Edit HTML option from there. Then find the </head> tag by clicking Ctrl+F and paste the below given code above the </head> tag.

<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: Add CSS for Buttons

Now find the ]]></b:skin> tag by clicking Ctrl+F again and paste the below code above the ]]></b:skin> tag.

 /* CSS Demo & Download Buttons By Tech Zenoh Pro */

.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;
}


Step 3: Add HTML Code for Buttons

Now paste the below code where you want to place the Download and Demo button in your article. (Be sure to switch from Compose View to HTML View when pasting the code below.)

Use the code below to put the Demo & Download Buttons HTML code together.

<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>


✓ If you want to add Demo and Download Buttons separately, then copy and paste the following code.

✓ For Demo Button Only:

<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>
</div>

✓ For Download Button Only:

<div id="wrap" style="text-align:center">
<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>


How to Customize the Buttons

You can easily customize these buttons to match your blog's design:

  • Change Button Colors: Replace #f84f4f (red) and #36D7B7 (green) with your preferred colors.
  • Change Button Size: Adjust the height and width values in the CSS.
  • Change Button Text: Modify "Demo" and "Download" text in the HTML.
  • Add Your Links: Replace # with your actual Demo and Download URLs.
  • Change Icons: Replace fa-laptop and fa-download with other Font Awesome icons.


Frequently Asked Questions

Q: Do I need to add both the CSS and JavaScript codes?
A: Yes, you need to add both. The JavaScript loads Font Awesome icons, and the CSS styles the buttons.

Q: Can I use these buttons on any Blogger template?
A: Yes, these buttons work on any Blogger template. The code is universal.

Q: Will these buttons affect my blog's loading speed?
A: No, these buttons use lightweight CSS and a CDN for Font Awesome, which loads quickly.

Q: Can I change the animation effect?
A: Yes, you can modify the CSS transitions and animations to create different effects.

Q: Are these buttons mobile-responsive?
A: Yes, the buttons are fully responsive and work well on all screen sizes.


Conclusion

I hope you understand everything. In this way, you can easily add animated Demo & Download button codes to your blog. These buttons will make your blog posts look more professional and engaging, helping you attract more clicks and interactions from your readers.

So far today. I will come with the next post very soon. Until then everyone stay well and stay healthy.

Cel7miros

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.


© Copyright: Tech Zenoh Pro™

Post a Comment