About Web UI Kit
The code is based on Oscar Alexander's excellent solution, which I strongly recommend checking out, just to understand how it works.
Usage
After downloading and extracing the file, you'll have 2 folders, drop them into your website's root folder.
And then, link the stylesheets to your file:
<link rel="stylesheet" href="webuikit-css/webuikit.css" type="text/css" />
Now you can create different buttons by applying different classes to the following HTML code:
<p class="clearfix"><a href="#" class="button" onclick="this.blur();"><span><span>Button</span></span></a></p>
Download Coda Clips
Here are available classes:
- Colors: normal, alt, pink, purple, green,dark.
- Glyphs: plus, minus, left, right, up, down, check, x, star, thumb, heart, back.
- Glyphs without text: no-text.
For example:
1. Generic button:
<p class="clearfix"><a href="#" class="button" onclick="this.blur();"><span><span>Generic Button</span></span></a></p>
2. Color:
<p class="clearfix"><a href="#" class="button green" onclick="this.blur();"><span><span>Green Button</span></span></a></p>
3. Glyph only:
<p class="clearfix"><a href="#" class="button thumb no-text" onclick="this.blur();"><span><span> </span></span></a></p>
4. Glyph with text:
<p class="clearfix"><a href="#" class="button star" onclick="this.blur();"><span><span>Star</span></span></a></p>
5. Button with text and color:
<p class="clearfix"><a href="#" class="button heart pink" onclick="this.blur();"><span><span>Mark as Favorite</span></span></a></p>
All right, that's about it. Enjoy!
IE6 Support?
The Web UI Kit should work on IE6, but all images look like crap. I haven't found a way to make IE6 display png background perfectly. I tried IEPNGFIX, but it broke the :active status. If you really need IE6 support, you can convert all images to .gif.
Any suggestons (especially on IE6)? Bug Report? Please .
@ Sep 15, 2008
