Professional Magazine Blogger Templates Read More ×

Wednesday, May 27, 2015

Add Demo and Download button in Blogger

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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:



SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

3 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