Question

When using a HTML <button> whenever you press the button it moves a little. A small animation to show it’s actually a button.

I’m looking for a way to have it stay exactly the way it is, and force my animation using mouse Events.

I started off just placing an <img> and use mouse events to swap the picture. This worked fine, except that it has some side effects I can’t seem to get rid of. For starters, pictures can be dragged, which just looks odd if just press the button – hold – and decide you want to leave the button. I can turn off “draggable” but then it will show a blue square selection box, which is very unwanted.

My solution was to place it on a <button> element instead (with hidden background and border). This solves all the problems, except that it’s slightly wiggling to the side.
I tried disabling it, but that also disables the javascript events.

How can I force a button to stay in place even if it’s clicked?

Answer 1

So you have to use another tag than button (for instance span) and manipulate it’s behaviour with javascript.