CSS: Prevent parent element getting :active pseudoclass when child element is clicked

JSFiddle

When you click the button, you see that :active pseudoclass is triggered for the parent div. Is there a pure CSS (or some JS library) way of :active pseudoclass not toggling on button click?

I tried z-index, position: absolute & fixed and no success.