How to Make Demo and Download Buttons For Blogger

If you are providing tutorial related to software download, games download, scripts, templates then you know the importance of Demo and Download buttons for your blog or website. There are so many tutorial how to make the "Demo" and "Download" button. Today in this tutorial we will show you how to create soft looking Demo & Download buttons for your blogger blog. This button is made up of Pure CSS3 i.e. without usage of any Images or JavaScript. A live working demo of this button can be seen by clicking the below button.

Demo Download

Installing Button On Your Blogger Blog

Go to Blogger Dashboard » Template » Edit HTML, click on the sideways arrow next to <b:skin>...</b:skin> and paste the code just above ]]></b:skin> (Press CTRL + F to find it):

/* -- Copyright © www.BlogsDaddy.com, All Rights Reserved. --*/

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}

.button ul {margin:0;padding:0}

.button li{display:inline;margin:0;padding:0}

.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }

.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}

.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

• Now, Click to Save Button. 

How To Use These Buttons?

HTML Code For Demo and Download Buttons Given Below. Just Follow The Steps For Add These Buttons

• Go to New Post In Blogger Blog
• When Editing Post Click On Edit HTML Tab 
• Choose Your Button Style Code Below and Paste It 
• Replace Links and Link Names With Your Own Links

<div style="text-align: center;">

<ul class="button">

<a class="demo" href="http://www.blogsdaddy.com" target="_blank">Demo</a>

<a class="download" href="http://www.blogsdaddy.com" target="_blank">Download</a>

</ul>

</div>

<div class="clear"></div>

Remember - Replace http://www.blogsdaddy.com With Your Own Link.

You May Like To Read:

1. Add Beautiful CSS3 Buttons To Blogger Blog
2. Another Beautiful CSS Buttons For Your Blogger Blog

Please give us reviews about this tutorial using comments & subscribe our updates also. See you soon with more articles.