HTML Buttons - Best Practices

Question

Assume you have a customer-facing application hosted on a Web server. You have no control or knowledge of the customer's client. You also want an appealing design but you don't want to overwhelm the user with heavy graphics and/or obtrusive JavaScript.

You've got a nice CSS layout with rounded corners but the default gray buttons stand out like a sore thumb.

I can search the Internet for examples like this, but I see nothing that helps me determine whether or not a given solution is appropriate or if a better one exists.

With that in mind, what are your top suggestions for creating attractive / usable buttons in HTML that work or at least degrade gracefully among the various browsers / platforms?

Answer 1

jQuery UI buttons

I suggest you take a look at jQuery UI buttons, as it is one of the most popular HTML button replacements out there. Since you are already using jQuery, this should be a good choice.

Jquery UI is

• Extensively tested
• Cross browser compatible
• Optimized
• Highly customizable, with the ThemeRoller service

Links

• http://jqueryui.com/demos/button/
• http://msdn.microsoft.com/en-us/scriptjunkie/ff756526.aspx

Answer 2

HTML provides clickable image buttons. Try <input type="image" src="..." />.

Answer 3

This is what i use for dynamic submit buttons. No javascript and its crossbrowser.

<button class="form-submit" type="submit"><span>Inloggen</span></button>

CSS:

.form-submit { clear: both; float:none; height:30px; color: #fff; overflow: visible; background: #fff url(../images/design/bg-buttons.png) no-repeat 100% 0; border:0 none; clear: both; cursor:pointer;  font:bold 12px arial; padding:0 10px 0 0; margin:15px 0 0; text-align:center; }
.form-submit span { padding:0; border:0; height:30px; background: #fff url(../images/design/bg-buttons.png) no-repeat 0 0; display:block; white-space:nowrap; padding:0 0 0 10px; text-shadow: 1px 1px 3px #000; line-height:30px; }
.form-submit::-moz-focus-inner { border:0 none; padding:0; }
.form-submit:hover { color: #ff0000;  background-position: 100% -30px;}
.form-submit:hover span{ background-position: 0 -30px; text-shadow: none;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .form-submit span { position: relative; margin: -1px 0 0; left: -3px; }
}

CSS ie6

.form-submit span {  margin: 0 0 -1px; }
.form-submit.hover {  color: #ff0000; background-position: 100% -30px;}
.form-submit.hover span{ background-position: 0 -30px;}

Example could be seen here (login button)

http://www.oudstanding.nl/user/login