title: Button is unclickable
body: <p>Currently we make use of nice flat ccs-only buttons that show a push-down effect onclick. They have a weird behaviour:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6SeG8/" rel="nofollow">http://jsfiddle.net/6SeG8/</a></p>
  
  <p>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.</p>