HTML Buttons - Best Practices [closed]

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="..." />.