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

Question

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.sohtanaka.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 :(

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

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

Answer 5

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

Answer 6

Sexy CSS Buttons

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

Thank you all for your suggestions, some remarks from my side:

• Most external examples suggested ignore my question. I know how to style elements using js replacement or normal links, that's not the problem.
• I tried to suggestion you use that blog I mentioned yet replace the divs with button elements. This works remarkably well in IE, but not in Firefox due to padding differences. Also, Firefox really screws up font rendering within button tags.
• Not styling anything at all I do not see as an option, nowadays almost all web applications have styled buttons.

This leads me to the conclusion that there is no answer to all of the following: high quality styling, cross-browser styling, javascript-free, hack-free.

Therefore I decided to keep things as is, and accept the fact that users need to have Javascript enabled to use my application, thanks for the help all.

Answer 12

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).

Answer 13

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;
}