1

Throughout our application, we use styled input buttons for submitting forms. For some reason you have to precisely click them in order for the click to be registered. Over half the time, it looks like the button is clicked (i.e. changes on mousedown/mouseup), but nothing happens and we have to click again. If we simply remove the css styling, the button works fine all the time.

Example:

enter image description here

Our users really like the look of the styled buttons, but are a bit annoyed by not knowing if the click event went through. Any easy way to solve this?

Update

I was finally able to neatly reproduce this in jsfiddle: http://jsfiddle.net/xRK4C/3/ . You can see the behavior if you click on the upper left few pixels of the button with the rounded corner. I'm thinking it's because the button moves when being clicked, which causes the mouse to be outside the button on mouse-up. Our users wanted this though, so is there any good way to keep the 3d effect without sacrificing click area?

Beep beep
  • 18,873
  • 12
  • 63
  • 78
  • 1
    can you post the code or jsfiddle, so we can see? – ptriek Dec 04 '11 at 14:27
  • Could you post an example of the code with the styling? Maybe using a http://jsfiddle.net – tw16 Dec 04 '11 at 14:27
  • -1 Your textual description and screen shot offer little value in describing your issue. Please understand that you have to post source code to lay out the issue efficiently. – Šime Vidas Dec 04 '11 at 14:51
  • Are you using a container element? This issue can sometimes be caused by margins on the inner element which means that it must be clicked on directly – jb11 Dec 04 '11 at 22:18
  • Nope, just code like . I've seen the same thing on other pages on the net as well (for example, Wufoo used to use styled button elements to submit their forms, but since then has removed most of their styling and changed to input tags or anchors instead of buttons, not sure if related). – Beep beep Dec 04 '11 at 22:51
  • please post something on jsfiddle, i'm afraid you won't get any answers without.. – ptriek Dec 04 '11 at 23:29
  • jsfiddle link added. Issue is most evident when clicking in top left corner of button. – Beep beep Dec 05 '11 at 11:12
  • It is definitely the relative positioning causing the issue. The same thing will happen if you apply the same active state to the unstyled button. It ONLY messes up when at the extreme left and extreme top because the active state moves the button 2px down and right. This means that the button is no longer underneath the mouse cursor and so seems to stop the submit process. – tw16 Dec 05 '11 at 15:51
  • tw16 - any easy way to get around this without changing our positioning? – Beep beep Dec 07 '11 at 17:35

2 Answers2

3

I believe it's the relative positioning on :active. I guess the moving of the button gets the mouse events confused. I'd suggest to changing the margins instead.

EDIT: Margins don't work either, neither a CSS 2 translation.

You need to somehow move the "image" of the button without moving the button (thus the area that is clicked on) itself, but I can't think of anything right now.

RoToRa
  • 37,635
  • 12
  • 69
  • 105
  • You could try making the shadow do something like shrinking or switching button colors/gradients, but moving the container using :active is definitely the issue. I tried affecting just :click and then leaving :active alone, but that didn't help either. – Scottux Jan 23 '12 at 02:21
0

Went to the JSFiddle site and played around with the styling there.

I noticed the hover was successful on the edge of the button, but the click was not.

So, I changed the left:2px; top:2px; to left:0px; top:0px; and the hover, of course, still worked, but the click was successful on the edge of the button.

arghtype
  • 4,376
  • 11
  • 45
  • 60
LReeder14
  • 608
  • 7
  • 10
  • Thanks @arghtype for the edits to my comment. Beep Beep - I did finally use the code in JSFiddle to work out a very similar issue on several of our pages. Thanks. – LReeder14 Dec 03 '15 at 22:08