title: CSS 3d-Button "onclick"-event not working on top
body: <p>I have a website with 3d-Buttons. But they are not clickable on top or better the css-transformation is working, but the "onclick"-event is not activating... It is only not working in the area, where the button goes down and is not anymore there..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function foo() {
    console.log('foo() called');
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/** CSS **/
  
  .clicky {
      /** Offset the Position **/
      position: relative;
      top: 0;
      margin-top: 0;
      margin-bottom: 10px;
  
      /** 3D Block Effect **/
      box-shadow: 0 10px 0 0 #6B2A4A;
  
      /** Make it look pretty **/
      display: block;
      background: #a47;
      color: #eee;
      padding: 1em 2em;
      border: 0;
      cursor: pointer;
      font-size: 1.2em;
      opacity: 0.9;
      border-radius: 10px;
  }
  
  .clicky:active {
      /** Remove 3D Block Effect on Click **/
      box-shadow: none;
      top: 10px;
      margin-bottom: 0;
  }
  
  .clicky:hover {
      opacity: 1;
  }
  
  .clicky:active,
  .clicky:focus {
      /** Remove Chrome's Ugly Yellow Outline **/
      outline: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="clicky" onclick="foo();"&gt;CLICK ME!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is it possible, that the "onclick"-event is also trigger when the user clicks the 3d-Button on the top?</p>
  
  <p>It would be great if someone can help me, thank you!</p>