Button doesn't work as it should (onclick event)

Question

I'm trying to figure out why my code doesn't work. The button works only if you click on a certain area. If you try to click between the text or above it, nothing happens. Please see my fiddle here:

http://jsfiddle.net/Zv6Cx/

I think it has to do something with one of my shadows:

 box-shadow:        inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 12px 0px #231F20,
                        0px 14px 0px #231F20,
                        0px 16px 0px #231F20,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);

    -moz-box-shadow:    inset 0px -4px 5px rgba(255,255,255,0.2),
                        inset 0px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 12px 0px #231F20,
                        0px 14px 0px #231F20,
                        0px 16px 0px #231F20,
                        /**/
                        0px 8px 5px rgba(0,0,0,0.5);

    -webkit-box-shadow: inset 5px -4px 5px rgba(255,255,255,0.2),
                        inset 5px 1px 5px rgba(255,255,255,0.2),
                        /**/
                        0px 12px 0px #231F20,
                        0px 14px 0px #231F20,
                        0px 16px 0px #231F20;
}

Answer 1

You need to set transform-origin-y appropriately (y because you are rotating about the X axis). The default is 50%, and this makes it so you cannot click part of the rotated element. I think this is a little wonky, but that seems to be the problem.

transform-origin-y: 0

This will fix it, although it does move the button up a bit. Add more top margin if you need:

http://jsfiddle.net/Zv6Cx/5/