Button Click Animation

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.

score 3 · Accepted Answer · edited May 23 '17 at 11:59

3

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

edited May 23 '17 at 11:59

Community

1
1

answered Jun 05 '11 at 03:42

no.good.at.coding

20,221
2
60
51

How would this be using the `pseudo-classes`, since I can't see any `click` class... – Nathan Campos Jun 05 '11 at 12:29
@Nathan Well, [`:active`](http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/html/full/flat/css3-modsel-19.html#foo) would be perfect, but with Mobile Safari it doesn't seem to work as expected by itself, but there's an [easy fix](http://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) - I don't have an Android device at hand, so I can't say for sure but since both browsers are WebKit based, this should work. – no.good.at.coding Jun 05 '11 at 14:13
1

@Nathan Updated my answer. And I can't find anything that seems to suggest that `:active` doesn't work with Android. Also note that some browsers support `:active` for any DOM element, not just links. – no.good.at.coding Jun 05 '11 at 14:22

score 0 · Answer 2 · answered Mar 12 '14 at 11:34

To create html buttons with states use kodeinfo's editor . It defines normal , hovered and pressed state so just make changes using interface and download the html code . you can do more than just creating states you can use gradients , borders , text formatting , icons etc

Button Click Animation

2 Answers2