cross-browser input type button style standardization and baseline establishment for skinning
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md
accept.png
bbuttonbase.css
bbuttonbase.exampleSkin.css
black_btn_bh.png
exampleImplementations.htm

README.md

#bbuttonbase

bbuttonbase allows common ui elements (anchors, inputs, and buttons) to be presented consistently cross-browser.


With bbuttonbase, the following markup pattern:

<span class="bbuttonbase"><input type="button" value="this is an input button" /></span>

<span class="bbuttonbase"><input type="submit" value="this is an input submit" /></span>

<span class="bbuttonbase"><input type="reset" value="this is an input reset" /></span>

<span class="bbuttonbase"><input type="image" value="" src="accept.png" /></span>

<button type="button" class="bbuttonbase"><img src="accept.png" /><span>this is a button</span></button>

<a href="" class="bbuttonbase"><img src="accept.png" /><span>this is a link</span></a>

renders each interactive element as a plain inline text link. from there, it's easy to extend by adding styles for graphical button elements, like so:

<div class="exampleSkin"><span class="bbuttonbase"><input type="button" value="this is an input button" /></span></div>

<div class="exampleSkin"><span class="bbuttonbase"><input type="submit" value="this is an input submit" /></span></div>

<div class="exampleSkin"><span class="bbuttonbase"><input type="reset" value="this is an input reset" /></span></div>

<div class="exampleSkin"><span class="bbuttonbase"><input type="image" value="" src="accept.png" /></span></div>

<div class="exampleSkin"><button type="button" class="bbuttonbase"><img src="accept.png" /><span>this is a button</span></button></div>

<div class="exampleSkin"><a href="" class="bbuttonbase"><img src="accept.png" /><span>this is a link</span></a></div>

allowing you to present common ui elements identically, while choosing your markup according to semantics.

To see these examples in action, check out the exampleImplementations.htm page included in this repo.