Skip to main content
FANCYBLOGGERTRICKS

follow us

Add a Stylish Demo and Download Button To a Blogger Blog


Today, I will be sharing a tutorial on how to create a pure and responsive css Demo and Download button for a blogger blog using CSS3. This download and demo buttons will use CSS hover effect to achieve a unique simple hover effect with the help of CSS.


I know you might have been wondering how those beautiful download and demo buttons appear in a blogpost. 
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.

This tutorial will greatly benefit those involved in Niches like Template sharing, Movies, Applications and so on.

Here’s is the guide: 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 blogger 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 templates sharing or any site that requires download and demo, then you  must have this two 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 created with css3 and html. 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.

How to create a beautiful demo and download button on blogger blog.

1 - Take a backup of your template.

2. Login to your 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:'\f135';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:'\f019';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. We have successfully created the buttons. Now let's implement them in our blog posts

How to add demo and download button to blogger posts. 

Now to show the buttons in your posts, follow the steps below.

1. Create a new post 
2. Now type your posts in the compose mode, then locate were u want to add the demo and download button  and switch to html mode. Now paste the below Html code wherever you want the button to appear.

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-DEMO-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-DOWNLOAD-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

3. Replace "YOUR-DEMO-LINK-HERE" with your demo link url
    Replace "YOUR-DOWNLOAD-LINK-HERE" with your download link url
4. Publish your post and see the amazing results.

Happy blogging..... 

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment