There're two different markups for the YUI buttons:
<span id="pushbutton2" class="yui-button">
<span class="first-child"><a href="#">Button Label</a></span>
</span>
<span id="pushbutton3" class="yui-button">
<span class="first-child">
<button type="button" name="button3">Button Label</button>
</span>
</span>
The different between these markups, is that the first code (anchor) can be a push button only, while the second code (button) can be any type of button (menu button, split button, push button, radio button, checkbox, etc).
The first problem with the YUI Buttons is with the button's tag, this tag is not included in the reset/font CSS, which means that each browser will apply a different parameters during the render process for this tag. To mitigate this problem uses this code:
NOTE: I hope the yui guys include this code in the next release...
<style>
button {
padding: 0;margin: 0;
border: 0;border-collapse:collapse;border-spacing:0;
font-size:inherit;font-size:100%;font-weight:normal;
/* 99% for safari; 100% is too large */
font:99% arial,helvetica,clean,sans-serif;
}
</style>
This code must be included right after the reset/font definition.
The second problem is related with the IE and the button tag, this browser will include a thin white border (interior border) to the button tag. I can't find the solution yet, I'm working on it... ;-) If you have any idea, let me know! A partial solution is to avoid the use of the button tag, instead uses anchor for push buttons (see the differences in IE between the button 2 and the button 3 in the examples).