CODEWITHSUNDEEP
htmlcss
Rvanlaak
Rvanlaak

Reputation: 3085

Button is unclickable

Currently we make use of nice flat ccs-only buttons that show a push-down effect onclick. They have a weird behaviour:

.button {
    cursor: pointer;
    display: inline-block;
    color: #FFF;
    font-weight: normal;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    background: #32a2f0;
    border: 0px;
    border-bottom: 2px solid #1e87cc;
    padding: 10px 30px;
}
.button:hover {
    background: #1e87cc !important;
    border-bottom: 2px solid #0169AD;
}
.button:active {
    border-bottom: 0px !important;
    border-top: 2px solid #0169AD;
    margin-top: 2px;
    padding-top: 10px;
    padding-bottom: 8px;
}

http://jsfiddle.net/6SeG8/

The problem is: When clicking the button at the top 2 to 4 pixels, the click event will not trigger. The css :active state does trigger, but the action of the button does not.

Upvotes: 4

Views: 2738

Answers (5)

Ray Poward
Ray Poward

Reputation: 366

Consider using an after pseudo-element:

.button:active:after{
  content: " ";
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 100%;
}

JSFiddle

Note, that it doesn't work in IE7 and earlier.

Upvotes: 2

Maxim
Maxim

Reputation: 13458

Try to press and hold button.

You can see if you press in a middle of the button then the button is dark blue (really pressed).

If you press near the border then the button cannot get 'mouseup' to raise 'click' event. So your javascript will never receive click event and triggered.

If you want the same behavior change border margin to transparent border with desired size.

Upvotes: 0

Kawinesh S K
Kawinesh S K

Reputation: 3220

.button:active {
    border-bottom: 0px !important;
    border-top: 2px solid #0169AD;
    //margin-top:2px;  //this is the problem
    padding-top: 10px;
    padding-bottom: 8px;
}

Updated Fiddle

.button:hover {
    background: #1e87cc !important;
    border-bottom: 2px solid #0169AD; // This may cause the onclick not to work when clicking form the bottom of the button
}

Upvotes: 2

Manish Kumar
Manish Kumar

Reputation: 10502

One thing you can do is 

<a href="#" onclick="alert('button is clicked')"><span class="button">Click me</span></a>

Upvotes: -1

James Donnelly
James Donnelly

Reputation: 128791

It's because of the borders and the top margin you're applying. Rather than specifying border-top: 0px;, etc., you should instead give a transparent border. You can then give extra width to the top border to make up for the margin:

.button {
    ...
    border-top: 2px solid transparent;
}

.button:active {
    ...
    border-bottom: 2px solid transparent;
    border-top: 4px solid #0169AD; /* Added 2px to this, instead of 2px margin */
}

JSFiddle demo.

Also you really shouldn't need to use !important at all.

Upvotes: 4

Related Questions