Question

我正在为Android开发WebApp，所以我添加了一个这样的自定义按钮：

HTML

<div id="btRegister" onClick="register()">
    Register
</div>

CSS

#btRegister {
    height: 40px;
    width: 100px;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 1px;
    line-height: 40px;
    border-width: 0 8px 0 8px;
    -webkit-border-image: url('shared/btRegister.png') 0 8 0 8;
    vertical-align: middle;
}

问题是，当用户点击自定义按钮时，没有感觉到按钮被点击（它没有问题地执行register()代码），所以我设计了另一个名为{{1}的按钮背景所以我想知道如何在用户点击按钮时将图像更改为btRegister_Clicked.png，然后返回正常状态，就像普通按钮那样。

Answer 1

你可以这样做：

<div id="btRegister" onClick="clickButton(this); register();">
    Register
</div>

function clickButton(btn){
    //change image
    setTimeout(function(){
        //change image back
    }, 120);
}

对此不太确定，但您也可以尝试使用<a>元素。这样您就可以使用pseudo-classes设置按钮样式，并避免在JavaScript中更改按钮。特别是:active psuedo class似乎对这个用例来说是完美的。但请注意，至少使用Mobile Safari it doesn't work without a little extra work。

#btRegister{
    /*normal style*/
}

#btRegister:active{
    /*style when active - change background image*/
}

<a id="btRegister" href="#" onClick="register()" ontouchstart="">Register</a>
<!--ontouchstart="" is a fix for Mobile Safari -->

Answer 2

使用状态创建html按钮使用kodeinfo的编辑器。它定义了正常，悬停和按下状态，因此只需使用界面进行更改并下载html代码。您可以做的不仅仅是创建可以使用渐变，边框，文本格式，图标等的状态

按钮单击动画

2 个答案: