Remove 3D press effect Internet Explorer button

Question

I\'m trying to remove the 3D click effect on buttons in Internet Explorer (I\'m using IE10).

I have tried with:

button:active {
  position:          


        

Answer 1

transform: translate(0, 0); works for IE11. Thanks @tomekwi.

My button text that was jumping was inside a ::before pseudo element, so I used the following to solve the issue:

.myButton:active::before {
    transform: translate(0, 0);
}

But in the end maybe it's better to just let it jump in IE.

Answer 2

I try this , it works perfectly .

button: active span,
button: focus span{position: relative;top: 0px;left: 0px;}

Answer 3

Had the same problem right now... It's a bit late, so I don't know whether the answer would still be applicable.

My solution was to put the button's text within a span element then set the style to transform: translateY(1px);. And no more unnecessary press effect. I was a bit apprehensive before trying it, as it would mess with FF, Chrome, and Safari for Windows. But weirdly, they seem to ignore it (for now at least). Tested on 28, 27, and 5.1 respectively. Also, I'm using IE 10.

Good luck