How to use jquery-ui themes to style buttons that needs 2 images

I have a button (created by a designer), that cannot be represented by ba开发者_如何学Pythonckground + border radius (it has a 3D-like effect, so the "radius" should be an image as well.

It is clear from tutorials like this one how to make such buttons. However, the jquery-ui seems to have only these (relevant) classes:

• .ui-state-default that holds the background image for the button and other components
• .ui-button - that defines button-only properties.

But the code is only one <input, so it can't have the two images, Is there a way to have $("..").button() use both images? I guess I can have some spans inside <button>, but having that everywhere is cumbersome.

there are several states associated with buttons and all widgets:

The following are the relevant classes and their relation to the button widget:

• ui-state-default
  • The button properties as it appears on the page
• ui-state-active
  • The button properties as it is being clicked
• ui-state-hover
  • The button properties as it is hovered

In the theme's css sheet there are each of these settings within the button settings that generally have a color or image set from the themeroller.

You could override the default properties to use your own images if you wanted either through another stylesheet or rewrite the one from themeroller.

You can also easily set the themeroller settings to give you a 3D look by setting the colors and opacities. If you need this only for buttons and not for your entire page, use the CSS scope feature.

Themeroller is here

Themeroller example with similar button to your example