Question

I’m developing a WebApp for Android, so I’ve added a custom button like this:

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;
}

The problem is that when the user clicks the custom button there is no sensation that the button was clicked(it executes the register() code without problems), so I’ve designed another button background called btRegister_Clicked.png, so I want to know how I can make some way that when the user clicks the button that image gets changed to the _clicked one and then go back to the normal one, just like a normal button does.

Answer 1

You could do something like this:

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

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

---

Not very sure about this but you might also try using an <a> element instead. This way you might be able to style the buttons with pseudo-classes and avoid having to handle the changing of the button in JavaScript. In particular, the :active psuedo class seem like it would be perfect for this use case. However, note that with Mobile Safari at least, 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 -->