In this post we are going to show you how to add stylish demo and download buttons to your blog. You can use these CSS buttons instead of demo and download links.
You can find the demo below. Move your cursor on the button for hover effects:
See also: AskForHost
Live Demo Download
FOLLOW THESE STEPS:
1. Go To Blogger Dashboard> Template> Edit HTML
2. Backup your template before editing.
3. Search for this,]]> </ b: skin>. before it paste the following CSS Code
Paste That code" ]]> </ b: skin> " Before it paste the Following CSS code
. button {-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border-radius: 5px 5px 5px 5px;-moz-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.25);-webkit-box-shadow: 0 1px 3px rgba (0, 0, 0, 0.25);box-shadow: 0 1px 3px rgba (0, 0, 0, 0.25);background: url ("http://www.zurb.com/images/overlay-button.png") repeat-x scroll 0 0 # 222222;border-bottom: 1px solid rgba (0, 0, 0, 0.25);color: # FFFFFF! important;cursor: pointer;font-weight: bold;line-height: 1;overflow: visible;font-size: 17px;padding: 8px 19px 9px;position: relative;text-decoration: none;text-shadow: 0-1px 1px rgba (0, 0, 0, 0.25);width: auto;'. demobutton {background-color: # 999999;text-align: center;width: 150px;'. demobutton: hover {background-color: # 00A0EE;'. downloadbutton {background-color: # 91BD09;text-align: center;width: 150px;'. downloadbutton: hover {background-color: # 00AC00;'. button: hover {-moz-box-shadow: 0 1px 11px rgba (0, 0, 0, 0.45);-webkit-box-shadow: 0 1px 11px rgba (0, 0, 0, 0.45);box-shadow: 0 1px 11px rgba (0, 0, 0, 0.45);'
4. Save your template.
Now whenever you want to add the demo or download button you only need to add the following code in the "EDIT HTML" section of your Blogger Editor
FOR DEMO BUTTON
Code
<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow" style="float: left;" target="_blank"> <span style="display: inline-block;"> Live Demo </ span> </ a>
FOR DOWNLOAD BUTTON
<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE" rel="nofollow" style="float: left;" target="_blank"> <span style="display: inline-block;"> Download </ span> </ a>Do not forget dropping down comments
Hope You will try this :-)
Add Muhammad Bux to you Google+ circles and follow Admirable, Add on PRINCE MB and like page Admirable
Written by Muhammad Bux
We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.
.jpg)
