How to prevent button text movement when button is active in Firefox?

As one of solutions : add padding:0 for button:active

button {
  border: medium none;
  margin-top: 17px;
  width: 224px;
  height: 40px;
  background: none repeat scroll 0% 0% #7BA6BB;
  color: #FFF;
  outline: medium none;
  cursor: pointer;
}

button:active {
  padding: 0px;
}

<button>Button</button>

Or you can add span(or maybe another tag that you like) into your button like this here:

button {
  border: medium none;
  margin-top: 17px;
  width: 224px;
  height: 40px;
  background: none repeat scroll 0% 0% #7BA6BB;
  color: #FFF;
  outline: medium none;
  cursor: pointer;
}

button:active {
  padding: 0px;
}

<button><span>Button</span></button>

Tags:

Html

Css

Firefox

Cross Browser

Related