non-ugly resizing of buttons in MSIE

Question

I attempted to re-size two buttons in MSIE, so they would be extra-large but I get ugly aliasing.

    {%html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"%}
    {%head%}
        {%title%}ugly button{%/title%}
        {%style%}
        button {
          height:100px;
          margin:2em;
          width:450px;
        }
        {%/style%}
    {%/head%}
    {%body%}
        {%h2%}ugly button{%/h2%}
        {%button id="ugly" onclick="alert('ugly');"%}click me{%/button%}
    {%/body%}
    {%/html%}

Of course it looks fine in every other browser I tried:

http://img535.imageshack.us/img535/2416/buttonugly001a.png

Is there a workaround for getting large buttons without this unwanted appearance?

Update: Important note I am not using images in this example. This is just the application of CSS to the native "button" element in MSIE.

Answer 1

This is because Internet Explorer just takes the pixels and expands them as a single square rather than trying to imitate the pixels like it were a vector image. Honestly, it's bad practice to resize images larger in the browser, you're really only supposed to resize them smaller because the larger versions look so horrid. If you need the buttons larger, you should save them larger.

Personally, I wish all browsers implemented this sort of image resizing technique. I think it looks a lot better and shows the true image being used. There is not a work-around for it as far as I know, other than redoing your images to make them bigger so you don't need to resize them.

Edit: Using buttons should not produce that effect, at least it doesn't for me in IE. I tried it using an input type=button and a button, both display perfectly fine for me with no weird aliasing issues. What other styles are you applying to them?

Answer 2

CSS Buttons?

http://cssbutton.com/forms/