jQuery Mobile是一个流行的移动应用程序框架，提供丰富的UI组件和交互效果来开发移动应用程序。其中一个最常用的UI组件是按钮，jQuery Mobile从设计上提供了许多不同样式的按钮，但在某些情况下，这些样式不满足我们的需求。 在这种情况下，我们需要重写jQuery Mobile按钮。jQuery Mobile使用两个不同的类名来定义按钮样式：ui-btn和ui-btn-inner。我们可以通过创建自己的CSS规则来替换这些类名，从而实现自定义样式。下面是一个示例代码，演示如何将jQuery Mobile按钮重写为红色：

在HTML文件中，我们需要定义两个按钮元素：

<button id="custom-btn1">Button 1</button>
<button id="custom-btn2">Button 2</button>

然后，在CSS文件中，我们定义按钮的样式：

/* 自定义按钮样式 */
#custom-btn1 {
background-color: red;
color: white;
border: none;
}
#custom-btn2 {
background-color: white;
color: red;
border: 2px solid red;
}
/* 替换jQuery Mobile的btn和btn-inner类 */
#custom-btn1.ui-btn,
#custom-btn1.ui-btn:hover,
#custom-btn1.ui-btn:active,
#custom-btn1.ui-btn:focus,
#custom-btn1.ui-btn-inner {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
#custom-btn1.ui-btn:after,
#custom-btn2.ui-btn:after {
display: none !important;
}
#custom-btn1.ui-btn-inner {
color: white !important;
text-shadow: none !important;
}
#custom-btn2.ui-btn,
#custom-btn2.ui-btn:hover,
#custom-btn2.ui-btn:active,
#custom-btn2.ui-btn:focus,
#custom-btn2.ui-btn-inner {
background-color: transparent !important;
border: 2px solid red !important;
box-shadow: none !important;
}
#custom-btn2.ui-btn:after {
background-color: white !important;
}
#custom-btn2.ui-btn-inner {
color: red !important;
text-shadow: none !important;
}

在上面的代码中，我们为每个按钮元素定义了唯一的ID，然后使用CSS选择器替换了jQuery Mobile的ui-btn和ui-btn-inner类。这些规则中的!important声明可以确保我们的样式优先于基本样式。

通过更新按钮元素的样式和使用自定义的CSS规则，我们可以很容易地改变jQuery Mobile按钮的样式，以适应我们的应用程序需求。