The new version goes really semantic and 100% customizable!
Say goodbye to the skins from the previous versions.
Say hi to the button styles.
You may choose between 8 different styles of slick, cool looking and variable in width Web 2.0 buttons to which you can set any font and background color you like only with CSS.
Demonstration of the 8 Types of Buttons Styles
Button Style 1 (background: lightgreen; color: #dbefdb;)
Button Style 2 (background: red; color: #efa5a5;)
Button Style 3 (background: orange; color: #f0dfc0;)
Button Style 4 (background: violet; color: #f7ebf7;)
Button Style 5 (background: orange; color: #fff;)
Button Style 6 (background: black; color: #fff;)
Button Style 7 (background: lightblue; color: #fff;)
Button Style 7 (background: lightgreen; color: #000;)
Installing and Running the Script
- Copy the Web20Button folder in your scripts folder. In this demo I have assumed that it is Scripts
- Regsiter the runtime script in the
<head>...</head> section of your webpage:
<script type="text/javascript" src="Scripts/Web20Button/Scripts/Web20Button.js"></script>
... and modify the string in red, if your scripts folder's name is not "Scripts"
- Register the following script in the
<head>...</head> of your webpage, just below the runtime script:
<script type="text/javascript">
var Web20ButtonsScriptFolder = 'Scripts';
</script>
and modify the string in red, if your scripts folder's name is not "Scripts"
- Create a semantic navigation list like the ones from the examples above. In fact, the structure is not that important. You may have a simple
<div> with a few links inside, but in this demo we have tried to be semantic:
<div>
<ul>
<li><a href="http://acidmartin.com" title="acidmartin.com">acidmartin.com</a></li>
<li><a href="http://wemakesites.net" title="wemakesites.net">wemakesites.net</a></li>
<li><a href="http://psd-to-xhtml.net" title="psd-to-xhtml.net">psd-to-xhtml.net</a></li>
</ul>
</div>
- To add style to your navigation buttons, simply put the attributes in red to your wrapping
<div>, as shown below:
<div rel="web20buttons" class="Style1">
<ul>
<li><a href="http://acidmartin.com" title="acidmartin.com">acidmartin.com</a></li>
<li><a href="http://wemakesites.net" title="wemakesites.net">wemakesites.net</a></li>
<li><a href="http://psd-to-xhtml.net" title="psd-to-xhtml.net">psd-to-xhtml.net</a></li>
</ul>
</div>
... and reload the page. The rel attribute will notify the script, that the links inside the <div> should be styled, and the class attribute instructs the script which one of the 8 styles to load for that particular link list. You may choose from Style1 to Style8.