jQuery Mobile Buttons

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Buttons

« Previous
Next Chapter »

Mobile applications are built upon the simplicity of tapping things you'd want displayed.

## Creating a Button in jQuery Mobile

A button in jQuery Mobile can be created in three ways:

- Using the <button> element
- Using the <input> element
- Using the <a> element with data-role="button"

## <button>

<button>Button</button>
Try it yourself »

## <input>

<input type="button" value="Button">
Try it yourself »

## <a>

<a href="#" data-role="button">Button</a>
Try it yourself »

| Buttons in jQuery Mobile are automatically styled, making them attractive and useable on mobile devices. We recommend that you use the <a> element with data-role="button" to link between pages, and <input> or <button> elements for form submission.

## Navigation Buttons

To link between pages by buttons, use the <a> element with the data-role="button" attribute:

## Example

<a href="#pagetwo" data-role="button">Go to Page Two</a>
Try it yourself »

## Inline Buttons

By default, buttons take up the full width of the screen. If you want a button that is only as wide as its content, or if you want two or more buttons to appear side by side, add data-inline="true":

## Example

<a href="#pagetwo" data-role="button" data-inline="true">Go to Page Two</a>
Try it yourself »

## Grouped Buttons

jQuery Mobile provides an easy way for grouping buttons together.

Use the data-role="controlgroup" attribute together with data-type="horizontal|vertical" to specify whether to group buttons horizontally or vertically:

## Example

<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">Button 1</a>
<a href="#anylink" data-role="button">Button 2</a>
<a href="#anylink" data-role="button">Button 3</a>
</div>
Try it yourself »

| By default, grouped buttons are grouped vertically with no margins and space between them. And only the first and the last button has rounded corners, which creates a nice look when grouped together.

## Back Buttons

To create a Back button, use the data-rel="back" attribute (this will ignore the anchor's href value):

## Example

<a href="#" data-role="button" data-rel="back">Go Back</a>
Try it yourself »

## More data-* Attributes For Buttons

Attribute | Value | Description | Example
--- | --- | --- | ---
data-corners | true | false | Specifies whether the button should have rounded corners or not | Try it
data-mini | true | false | Specifies whether the button should be small or not | Try it
data-shadow | true | false | Specifies whether the button should have shadows or not | Try it

For a complete reference of all jQuery Mobile data-* attributes, visit our jQuery Mobile Data Attribute Reference.

The next chapter demonstrates how to attach icons to your buttons.

« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE