How to remove the default animation of clicking on the button in IE 9, 10, 11?

In IE 9, 10, 11 jump button when clicked. The margin: 0 and padding: 0 properties on the :active and :focus pseudo-classes do not solve the problem. Example of sliding buttons on the video: https://monosnap.com/file/Lcln7cTFX0lPwWjbeu5JnQA5ikcefn

Author: Vadizar, 2017-02-06
Source

4 answers

Global solution without unnecessary nested elements:

button {
  padding: 10px;
  background: #fff;
  border: 1px solid;
}

button:active, button:focus {
    position: гelative;
    background: #999;
}

/* стили только для IE9 */ 
@media screen and (min-width:0\0) { 
  button:active, button:focus {
    top: -1px;
    left: -1px;
  }
}

/* стили только для IE10 и IE11 */ 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  button:active, button:focus {
    top: -1px;
    left: -1px;
  }
}
<button>
    click me
</button>
 2
Author: Vadizar, 2017-02-26 11:53:17 

button > span,
button:active span, 
button:focus span {
    position: relative; 
    top: 0; 
    left: 0;
}
<button><span>Button</span></button>
 10
Author: soledar10, 2020-11-27 08:02:49

The simplest and most reliable: replace

You can also enable css for IE, which compensates for the offset without adding internal tags: .btn { padding: 1px 0px 0px 1px; } .btn:active { padding: 0px 1px 1px 0px; }

You may see additional unwanted content the behavior of neighboring objects, but you can dig in this direction.

 5
Author: vadru, 2017-02-24 01:12:24

The solution was tested on IE 11. The focus works by subtracting one pixel each from the left and top of the inner margins and adding it to the right and bottom, respectively: 

button {
  padding: 10px;
  background: #fff;
  border: 1px solid;
}


button:active {
  padding: 9px 11px 11px 9px;
  background: #999;
}
<button>click me</button>
 3
Author: Sasha Omelchenko, 2017-02-23 11:54:32