I agree completely; I usually use 'em' sizing and this works across all browsers as well.

Styling font elements to be readily resizable is good practice for the reasons stated (accessibility, readability, minimize visitor annoyance, etc.) however I was simply addressing the question at hand and feel that this topic would be tangential to styling a button using CSS to look like the graphic example offered...

But maybe not; since if a client comes to me wanting to add flashing animated Gifs of spinning globes and compasses to their home page, I feel it is my duty to educate them that those elements will likely drive away the more discerning visitors from their site.

Resizable font faces gets my vote...here's the chunk of the above code with relative sized fonts instead of pixel-defined fixed sizing. This works in IE (without any any special style sheets) and all other CSS supporting browsers.

This layout looks fairly acceptable with an increase in size of +1 in FF and IE...

.menu a {
padding: 6px 12px 8px;
line-height: 28px;
font-family: Arial, sans-serif;
font-size: 0.7em;
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.02em;
color: #FFF;
background: #55298A;
}