jQuery Mobile: How to customize button

How do I change the <a data-role="button"> button's background to my image? Also how can I add my custom icons on top of a but开发者_JAVA技巧ton at left side?

Give the link a class and use CSS to change the background image.

<a data-role="button" class="my-button">

...

.my-button {
    background-image: url('images/my-button.png') !important;
}

I would say that the recommended way to customize a jQuery Mobile button is adding a custom theme.

<a data-role="button" data-theme="my-site">Button</a>

That will give you more control over the different elements and states of the button. For instance, you can target different states of the button in CSS by writing the code for the class associated with your custom theme name (they are automatically added to the button):

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

Keep in mind that the default buttons are made out of borders, shadows, and of course the background gradient. There also additional HTML elements inside the button that are automatically generated by the framework. Depending on what exactly you want to customize you might need to target other classes within the button (ui-icon, ui-btn-text, ui-btn-inner, etc).

Here is a tutorial that explains how to do advanced customization of the jQuery Mobile buttons. The articles shows how to do some basic customization, how to reset the jQuery Mobile theme, and how to turn the default button into anything you want:

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/