Type Here to Get Search Results !

Stylish CSS Demo & Download Buttons for Blogger

Stylish CSS Demo & Download Buttons for Blogger

Stylish CSS Demo & Download Buttons for Blogger

How To Add Stylish CSS Demo & Download Buttons in Blogger?

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


You have done. Successfully you installed the stylish demo and download buttons in blogger posts. We made them with simple CSS code, The buttons code does not impact page speed.

Below Post Ad

ADS