# 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 <input> element
- Using the <button> element with class="ui-btn"
- Using the <a> element with class="ui-btn"

## <input>

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

## <button>

<button class="ui-btn">Button</button>
Try it yourself »

## <a>

<a href="#anylink" class="ui-btn">Button</a>
Try it yourself »

Buttons in jQuery Mobile are automatically styled, making them attractive and useable on both mobile devices and desktop computers. We recommend that you use the <a> element with class="ui-btn" to link between pages, and <input> or <button> elements for form submission.
Note: Before version 1.4, we used the data-role="button" attribute to create a button in jQuery Mobile. As of 1.4, the framework use CSS classes to style buttons (except for <input> buttons).

## Navigation Buttons

To link between pages by buttons, use the <a> element with class="ui-btn":

## Example

<a href="#pagetwo" class="ui-btn">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" in a container element, to specify whether to group buttons horizontally or vertically:

## Example

<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
<a href="#" class="ui-btn">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 (Note: this will ignore the anchor's href value):

## Example

<a href="#" class="ui-btn" data-rel="back">Go Back</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 the "ui-btn-inline" class:

## Example

<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>
Try it yourself »

## More CSS Classes For Link Buttons

Class | Description | Example
--- | --- | ---
ui-btn-b | Changes the color of the button to a black background with white text (default is gray background with black text). | Try it
ui-corner-all | Adds rounded corners to the button | Try it
ui-mini | Makes the button smaller | Try it
ui-shadow | Adds shadows to the button | Try it

| If you want to use more than one class, separate each class with a space, like: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow" By default, <input> buttons have shadow and rounded corners. The <a> and <button> element does not.

For a complete reference of CSS classes for common styles, visit our jQuery Mobile CSS Classes Reference.

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

« Previous
Next Chapter »

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples