CSS :active not working (IE 10)

Question

Whenever I try to create 3D Buttons by nesting elements within an element... I have no problems in Google and Firefox... however in IE10... there seems to be a disconnect between the .parent:active and it's children...

Something like this:

<ul class="checkout">
    <li id="creditcard">
        <a href="#" class="a-btn">
            <span class="a-btn-left">Proceed to Checkout</span>
            <span class="a-btn-slide"><img class="slide-icons" src="icons.png" /></span>
            <span class="a-btn-right">
                <span class="arrow"></span>
                <span class="cards"></span>
            </span>
        </a>
    </li>
</ul>

Here is a JS fiddle: http://jsfiddle.net/H75jN/

All of the Transforms work in IE10... which makes me even more confused about why the :active function is not working.

Am I targeting the wrong class?

Answer 1

Replace <a> with <button>

Add extra CSS:

padding:0 0 5px 0; /* This is necessary for the Box shadow to work in Chrome */
border:0;
outline:0;
overflow:visible; /* Necessary for any images to overflow past button edges */
cursor:pointer;
background:none; /* This eliminates grey background in FF and IE */
box-sizing:content-box; /* By default, Chrome BUTTONS are border-box, this fixes it */

Finish!

JS Fiddle: http://jsfiddle.net/D8nJ6/1/

BAM!

In IE9, there's still an issue with the rounded-borders, but it has something to do with the Rounded-Border + Background-Gradient combination. Still looking for a fix.