Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove 3D press effect Internet Explorer button

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: relative; 
  left: -1px; 
  top: -1px; 
}

But this makes the entire button shifts 1 px top-left (not the behavior I'm looking for).
I want just to make the text stay in the same position even when clicked.

I've found this question with no good answers so I'm asking here.

This is my code so far:
http://codepen.io/anon/pen/aliFb

like image 469
Fez Vrasta Avatar asked Nov 25 '13 21:11

Fez Vrasta


1 Answers

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

like image 165
Jed Burke Avatar answered Nov 15 '22 05:11

Jed Burke