Add Demo and Download button in Blogger

Add Demo and Download button in Blogger

Add Demo and Download button in Blogger

Add Demo and Download button in Blogger - Follow along as we create a simple and cure demo and download buttons using some CSS3. CSS demo and download buttons will use css hover effect including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique and simple effect on hover. In this post i will share a tutorial how add responsive css Demo and Download button for blogger. This tutorial may help they blogging about blogger template and wordpress theme. Demo and Download buttons are created with CSS with mouse hover effect. Two icons are taken from fontawesome. So before staring this tutorial you have must add fontawesome in your blog.

Here’s how it will work: using a combination of HTML and CSS, i will create two separate pieces. These include the main button and two smaller eye and download icon. The eye and download icon used from fontawesme icon.

If you looking for a simple but beautiful CSS3 demo and download button for your website or blogspot blog, then this tutorial will help you. In this tutorial i shared totally css and html base demo and download button for blogger. If you running a blogger templates or wordpress themes sharing site, then you have must need to add two simple buttons and they are Demo and Download buttons. This two buttons are most important for template sharing site.

This tutorial is a  nice collection of beautiful css3  demo and download buttons with css3 animation effects that are created with css3 and html and this buttons are help the people who running a blogger template or wordpress themes sharing sites. The effect on the buttons is created using the css transition and border-bottom properties. There are two gradients used basically, one is css3 transition and the other one is border-bottom on hover to make the effect more nicer.

Now Lets start the tutorial. 

Before starting this tutorial please take a backup of you template for safety.

First go to Blogger Dashboard > Template > Edit HTML and put the below code before </style> tag.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} 

Save the Template.

Now use the below HTML Code in every post in html tab where you want share Demo and Download button.
 <div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div> 

Results:



Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.

5 comments:

  1. why on my blog , font awesome not available just text

    ReplyDelete
  2. I can't seem to be able to find the < /style> tag. Any suggestions?

    ReplyDelete
  3. how to add social content locker in blogger

    ReplyDelete
  4. Nice information.... A simple way to add button to blogger post is https://htmlcodegenerator.blogspot.com/2019/11/adding-button-in-blogger-post.html

    ReplyDelete