在jquery mobile中将按钮设为图像

Question

有人知道如何在jquery mobile中创建一个按钮来保留按钮特征（例如点击时的阴影）吗？

我目前正在使用Jquery Mobile图像按钮：

 <input type='image' src='img/facebook-login-button.png' id='login-with-facebook'/>

但它看起来有点可怕。单击时外观不会发生变化，因此只会在屏幕上显示标记。我最初有一个按钮标签，但我无法弄清楚如何用图像设计它。

有人知道任何解决方案吗？

Answer 1

解决方案1 ​​

如果你需要更轻的覆盖：

工作示例：http://jsfiddle.net/Gajotres/vds2U/57/

HTML：

<a href="#second" class="ui-btn-right">Next</a>

CSS：

.im-btn {
    width: 300px;
    height: 300px;
    background:url(http://indul.ccio.co/g5/84/v8/102034747777689280Uk0sEZQUc.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}

.im-btn:hover {
    opacity: 0.95;
}

.im-btn:active {
    opacity: 0.9;
}

解决方案2

如果你需要更深的叠加层：

工作示例：http://jsfiddle.net/Gajotres/vds2U/58/

HTML：

<a href="#second" class="ui-btn-right">Next</a>

CSS：

.im-btn {
    padding: 0 !important;
    width: 300px;
    height: 300px;
    background:url(http://indul.ccio.co/g5/84/v8/102034747777689280Uk0sEZQUc.jpg);
    background-size: cover;
    background-repeat:no-repeat;
}

.im-btn:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#444;
    opacity:0.4;
}

.im-btn:active > .overlay {
    opacity: 0.5;
}