How To Add Stylish CSS Demo & Download Buttons in Blogger?
When bloggers need to give external links to download or demo links, usually apply an anchor tag; nevertheless, demo and download buttons might be useful in attracting readers to click links.
It is simple to build a button in Blogger by employing the button> element or CSS elements like height, borders, and so on.
In this article, I'll show you how to create a Pure CSS-based simple and good CSS Demo and Download Buttons on Blog which look beautiful and blend in well with the design. Let's have a look at some amazing features.
Button Features
- CSS only.
- Weighs little.
- Icons from Font Awesome were used.
- A straightforward HTML/CSS combination.
- Hover Effect is a cool effect.
- On hover, the text changes as well.
- It is simple to personalize.
Blogger requires more customization than other CMS because it does not support the addition of external plugins. As a result, we'll need to customize our current [blogger template] to include a stylish demo and download button in our blogger blog.
Step-1: Add Font Awesome
If you've previously installed Font Awesome on your Blogger blog, you can skip this step. If not, go to Template > Edit HTML > Find </head> and paste the code above it.
<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 Code Of Demo & Download Buttons
Now, we will add CSS code to the Blogger template. Search for code ]]>/b:skin> and add the CSS code above it.
/* CSS Demo & Download Buttons By (www.emexee.com) */ .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 CSS Buttons in Posts / Articles
Add below CSS code where you want to show Demo and Download buttons in your posts.
<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">Live 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>
Only for demo button code
<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>
Only for download button code
<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>
If you want to change the icons you can easily do it by changing <i class="fa fa-laptop"></i> and <i class="fa fa-download"></i>.
Conclusion
💖 thank you so much for visiting our site, i hope you ve found value in this post Stylish CSS Demo & Download Buttons for Blogger.and if so, Please subscribe,like our pages and also share it with your friends and follow our blog for more updates like this.
if you face any problems or issues regarding our website or have any question,suggestion,contribution or make a report. Please feel free to ask us in the comments section below or Contact us via contact us page
