using jquery's wrapinner to wrap contents of links with spans to provide rounded corner button graphics

of course the easiest way to make buttons is to just use the cs3 rounded corners and let the ie6 users suffer with *gasp* right angles. But occasionally you find yourself in a situation where you need a liquid width graphical button. (my client has an affinity for reflections). I thought this technique would be as well documented as using jquery for sliding doors, but i couldn't find it anywhere so here you go.

in the CSS you can display your 3 graphics of the same height. a small left background graphic to apply to the span.lt, a long middle graphic for the span.mid, and the reverse of the left graphic for the span.rt.

Jquery:

$(document).ready(function(){
 $("a.button_lnk").wrapInner("< span class='mid' >< /span >");
$("span.mid").before("< span class='lt' />");
$("span.mid").after("< span class='rt' />");
});

HTML before js

< div id="usernav" >
 < a href="/login" class="button_lnk">login< /a >
 < a href="/signup" class="button_lnk">signup< /a >
< /div >

HTML after js

< div id="usernav" >
   < a class="button_lnk" href="/login" >
    < span class="lt"/ >
    < span class="mid" >login< /span >
    < span class="rt"/ >
  < /a >
  < a class="button_lnk" href="/signup" >
    < span class="lt"/ >
    < span class="mid" >signup< /span >
    < span class="rt"/ >
  < /a >
< /div >