Buttons that look good and the same in Firefox (PC and Mac), Opera (PC and Mac), Camino, Safari and almost in IE 5, 5.5 and 6 (PC), scale with changes in font size and be accessible, it is possible.
If you don’t want to view source, here is how it is done.
- Use the button element instead of input type submit
- Button elements can contain other inline elements such as images and spans
- Unfortunately button button elements can not contain block elements such as a div
- So you wrap the button element inside a div, so that you can absolutely position elements inside the button element relative to the surronding div
- So it goes something like this:
- div container, postion: relative;
- button, postion: relative; text-align: centre;
- image that fills the whole button element, postion: relative; size in ems(I did use three images, start, middle and end, but I was having troubles with FF on PC so I settle for the single image.
- span with button text position: absolute; and line height equal to image height.
- IE on PC adds an extra 1.75em of padding to the left and right of a button which can not be removed. So you need to fix that by either moving the absolute position of the span with button text 1.75em, increasing the width of the span 3.5em or by adding a 1.75em margin to the span by using conditional comments and a style sheet. The IE only margin is the only style element that is not in the page.
Take it, play with it and try and break it, and if you do let me know.
Joe Lewis for reminding me about the button element, Derek Featherstone whose techniques for accessible forms I was using when I got the idea about buttons, and Rang for his Aqua by Rang v2 photoshop action available from http://share.studio.adobe.com which made the buttons fast.