Wednesday, July 4, 2007

hackless buttons

I wonder why people hack IE without trying to set the background-position first =/


button {background:url(btn_blue_right_hover.gif) no-repeat 100% center;border:0;overflow:visible;padding:0 20px 0 0;}
button span {background:url(btn_blue_left_hover.gif) no-repeat 0 center;float:left;line-height:50px;padding:0 0 0 20px;white-space:nowrap;}

<button><span>test lorem ipsum dolor</span></button>

And there we have it. Semantically correct rounded corner buttons using sliding doors, the <button> element, and no hacks.