Stylish CSS Demo & Download Buttons for Blogger
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>.
