Wednesday, 20 March 2013

CSS Download and Demo Buttons for Blogger-Admirable

09:16





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

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.

 

© 2013 Admirable . All rights resevered. Designed by Templateism

Back To Top