Gorgeous web buttons with proper behavior, can it be done?

For my application, I wanted to style the submit buttons nicely. With normal CSS, I managed to get it to look good in Firefox, and horrible in IE. Then I saw this blog entry:

http://www.soht开发者_如何学Pythonanaka.com/web-design/liquid-color-adjustable-css-buttons/

Using that technique you get gorgeous buttons, in pretty much all browsers. However, there are also a few accessibility issues:

• Since it uses links instead of real HTML input or button elements, clicking the button does not submit the form. This is easily resolved using Javascript, but it would be ideal if the submit button works without Javascript enabled.
• Another issue is that hitting [ENTER] does not submit the form. A dirty hack is to include an invisible input element of type "submit" or "image".

Basically what I want is perhaps the impossible: The quality of the styling as seen in the blog entry, yet implemented using normal elements so that I get normal behavior.

Do I really have to chose between dirty hacks or poor styling?

Every button styling tutorial that I have seen so far has sub optimal results in IE :(

Do I really have to chose between dirty hacks or poor styling?

No, you could use Javascript like the rest of us. Load in your standard form (complete with submit-button), and then use neatly-written Javascript to dynamically "fix" some of the ugly elements. I'd suggest evaluating the jQuery framework for this type of thing if you wish to use clean code, and get cross-browser support.

See this tutorial. No JavaScript, no links instead of buttons, works in IE6 through IE8.

For my application, I wanted to style the submit buttons nicely. With normal CSS, I managed to get it to look good in Firefox, and horrible in IE.

For IE you need to add overflow: visible; to get rid of "unexplainable" padding. That's basically all you need to take into account for IE (as long as you're not in quirksmode).

Then I saw this blog entry:

Wouldn't go for it. Just stick to <button type="submit"> or <input type="submit"> with a good shot of CSS. You can even use CSS background images on those buttons. I wouldn't grab Javascript for layout issues as well, because that may cause "wtf?" experiences during page load when the user instantly sees parts of page rapidly changing. Just use CSS the smart way.

You might be able to transport the liquid button thingy you mention into a <button type="submit"></button> setup by replacing the surrounding <div>s by button elements, and the <a>s by <span>s.

Yes, you do.

Except that it's not 'poor styling', it's browser chrome. Form elements are part of the browser. 'Styling' them confuses the user and impedes usability. Seriously, just leave them well alone.

No matter how far you go with input styling, you will inevitably hit the brick wall of the file upload element, which is pretty much impossible to style. And if you can't style them all, why style any of them.

Seriously, this is akin to styling scrollbars. Don't bother.

Actually, you don't have to use Javascript or anything similar. You may use buttons as well.

Continuing from http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/ make the following changes:

1. Add the following to the CSS declaration

   .btn button { float: left; height: 40px; background: url(images/btn_stretch.png) repeat-x left top; line-height: 40px; padding: 0 10px; color: #fff; font-size: 1em; text-decoration: none; border: 0; }

2. Add the following to the HTML code:

   <div class="btn btn_learnmore"> <button>You Should Give it a Try</button> <span></span> </div>

Edit: also add margin: 0 to the button css declaration.

You could use a normal submit button, and use JavaScript to swap it out for a pretty JS-enhanced button. This way, you only use JavaScript where you know it'll be supported and you won't leave NoScript users with a broken page

Check out YUI's buttons... they seem to have figured this out

http://developer.yahoo.com/yui/examples/button/btn_example01.html

I do believe there is an <input type="image" src="ButtonBg.jpg" />

http://webdesign.about.com/cs/forms/a/aaformsubmit.htm

I've never really used it though.

Have you taken a look at Awesome Buttons?

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

They are pretty awesome, can be applied to links or buttons and look good in all the browsers I've tried (ie6 has a few little issues, but a little css just for them fixes things up).

We just use CSS to make some very nice looking buttons. Works in IE6 - 8 and Firefox.

input.blueButton
{
    background-image: url(../Images/blueButton.gif);
    width: 80px;
    height: 21px;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    color: White;
    background-color: Transparent;
    border-style: none;
    cursor: pointer;
    padding-bottom: 1px;
    margin: 0 3px;
}