JQuery Mobile: how to set up a button

Question

How do I change the background of the <a data-role="button"> button to my image? Also, how can I add my custom icons on top of the button on the left side?

Answer 1

Give a link to the 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; } 

Answer 2

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

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

This will give you more control over the various elements and states of the button. For example, you can customize the various states of a button in CSS by writing code for the class associated with your specific 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 of borders, shadows and, of course, the background gradient. Inside the button there are also additional HTML elements that are automatically generated by the wireframe. Depending on what you want to customize, you may need to target other classes inside the button (ui-icon, ui-btn-text, ui-btn-inner, etc.).

Here is a tutorial that explains how to perform advanced customization of jQuery Mobile buttons. The articles show how to perform basic setup, how to reset the jQuery Mobile theme, and how to turn the default button into everything you want:

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