CODEWITHSUNDEEP
htmlcsswebkit
Polmonite
Polmonite

Reputation: 943

Styling button interfere with click event

First of all: sorry for my bad english.

I've seen the problem only with Chrome, Opera and Safari, so I suppose it's a webkit problem.

I'm styling the buttons to give them a 'push' effect.
The problem is that if I click the button in certain points, at certains heights, it doesn't trigger the 'click' event.

I created a fiddle to better understand my problem; basically this is the css I'm using:

input[type="submit"], input[type="button"], button, .btn{
    position: relative;
    display: inline-block;
    border: none;
    padding: 4px 10px;
    text-align: left;
    color: #222222;
    font-weight: bold;
    background-color: transparent;
    top: 1px;
    bottom: 0;
    vertical-align: baseline;
    transition: none!important;
    -webkit-transition: none!important;
}
input[type="submit"], input[type="button"], button, .btn{
    background-color: #444444;
    color: #FFF!important;
    text-decoration: none;
    text-align: center;
    border-bottom: 3px solid rgba(0,0,0,0.75);
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .btn:hover{
    top: 0;
    border-bottom-width: 4px;
    cursor: pointer;
}
input[type="submit"]:active, input[type="button"]:active, button:active, .btn:active, .btn.selected{
    top: 4px;
    border-bottom-width: 0;
    bottom: 0;
}
.btn:hover, .btn:active{
    color: #FFF;
}

I was expecting it near the top of the button (I increment 'top', so it's normal behaviour that if I move the button too much down the cursor is not anymore upon the button), but it also doesn't work under the text.
That, I hadn't expected.

At the beginning I thought that it was working only when the cursor was exactly on the button text, but if I click on the bottom border it works.

My best guess so far is that the 'moving' of the element interfere with the click event (in the same way as if I pressed the mouse button and moved the cursor before releasing it).

Just wanted to know if somebody had this problem and solved it.

On Firefox and IE10 I had no problem (only near the top, but that's expected behaviour).

Thank you.

Upvotes: 1

Views: 155

Answers (1)

Michael
Michael

Reputation: 44200

Try this: http://jsfiddle.net/Lc9EW/

It uses a transparent border over the top area when in the active state:

margin-top: -5px;
border-top: 15px solid transparent;
border-bottom-width: 0px;

-moz-background-clip: padding;
background-clip: padding-box; 
-webkit-background-clip: padding;

Upvotes: 1

Related Questions