Mobile アプリケーションは、表示したいものを単純にタップするだけで済むように構築されています。
jQuery Mobile のボタンは、次の3つの方法で作成できます：
jQuery Mobile のボタンは、自動的にスタイルが設定され、モバイルデバイスとデスクトップコンピュータの両方で魅力的で使いやすいものになります。
ページ間のリンクには class="ui-btn" を持つ <a> 要素を、フォームの送信には <input> か <button> 要素を
使用することをお勧めします。
注: バージョン 1.4 以前は、data-role="button" 属性を使用して jQuery Mobile ボタンを作成していました。
1.4 になり、フレームワークは CSS クラスを使用してボタンをスタイルするようになりました（<input> ボタンを除く）。
ページ間をボタンでリンクするには、class="ui-btn" を持つ <a> 要素を使用します：
jQuery Mobile は、ボタンをグループ化する簡単な方法を提供します。
コンテナ要素に、data-type="horizontal|vertical" と一緒に data-role="controlgroup" 属性を使用することで、 ボタンを横か縦にグループ化することを指定します：
<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 »デフォルトでは、縦方向にグループ化され、マージンやボタン間にスペースはありません。 そして、最初と最後のボタンの角だけが丸くなるで、グループ化による見栄えが良くなります。
戻るボタンを作成するには、data-rel="back" 属性を使用します（注：アンカーのhref値は無視されます）：
デフォルトでは、ボタンは画面全体に広がります。 コンテンツと同じ幅のボタンだけが必要な場合、 または 2 つ以上のボタンを横に並べて表示する場合は、"ui-btn-inline" クラスを追加します：
| クラス | 説明 | 例 |
|---|---|---|
| ui-btn-b | ボタンの色をテキストが白い、黒い背景に変更する（デフォルトはテキストが黒く、背景は灰色です） | Try it |
| ui-corner-all | 角丸をボタンに追加する | Try it |
| ui-mini | ボタンを小さくする | Try it |
| ui-shadow | ボタンに影を追加する | Try it |
複数のクラスを使用する場合は、次のように各クラスをスペースで区切ります：
class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
デフォルトでは、<input> ボタンには影と角丸が設定されています。<a> と <button> 要素にはありません。
一般的なスタイルの CSS クラスの完全なリファレンスについては、jQuery Mobile CSS クラス・リファレンス をご覧ください。
次の章では、アイコンをボタンにアタッチする方法を示します。