css botón ¿estado activo que hace que se mueva el texto?

Question

Estoy trabajando en algunos ejemplos aproximados para un nuevo sitio en el que estoy trabajando.

por alguna razón, los últimos 2 de estos botones en firefox (últimos) moverán el texto ligeramente como si implementaran una animación de clic cuando entran en el estado activo. ¿por qué el primer botón tampoco estaría experimentando este problema?

código de abajo

<fieldset style="width:320px; float:left;"> 
     <legend>Pink Button</legend> 
      <button class="pinkbutton"><span>MESSAGE HERE</span></button> 
      <button class="pinkbuttondisabled" disabled="disabled"><span>DISABLED</span></button> 

    </fieldset> 

    <fieldset style="width:320px; float:left;"> 
     <legend>Grey Button</legend> 
      <button class="greybutton"><span>MESSAGE HERE</span></button> 
      <button class="greybuttondisabled" disabled="disabled"><span>DISABLED</span></button> 

    </fieldset> 

    <fieldset style="width:320px; float:left;"> 
     <legend>White Button</legend> 
      <button class="whitebutton"><span>MESSAGE HERE</span></button> 
      <button class="whitebuttondisabled" disabled="disabled"><span>DISABLED</span></button> 

    </fieldset> 

css debajo

.pinkbutton { border:1px solid #D2247b; width:150px; height:30px; background-color:#EF0093; color:#FFF;} 
.pinkbutton:hover {border:1px solid #FF4296; background-color:#FF5EAC;} 
.pinkbutton:active {border:1px solid #A61D61; background-color:#DC2F85; color:#333232;} 
.pinkbuttondisabled {border:1px solid #F3C4DB; width:150px; height:30px; background-color:#FDC6E2; color:#FFF;} 


.greybutton { border:1px solid #BBBBBB; width:150px; height:30px; background-color:#E2E2E2; color:#8d8c8c;} 
.greybutton:hover {border:1px solid #EF0093; background-color:#E2E2E2; color:#f62c92;} 
.greybutton:active {border:1px solid #696969; background-color:#BFBFBF; color:#424242;} 
.greybuttondisabled {border:1px solid #D5D4D4; width:150px; height:30px; background-color:#F4F4F4; color:#d5d4d4;} 

.whitebutton { border:1px solid #EF0093; width:150px; height:30px; background-color:#FFF; color:#EF0093;} 
.whitebutton:hover {border:1px solid #898989; background-color:#FFF; color:#898989;} 
.whitebutton:active {border:1px solid #898989; background-color:#E2E2E2; color:#979696;} 
.whitebuttondisabled {border:1px solid #FAB2DE; width:150px; height:30px; background-color:#FFF; color:#FAB2DE;} 

cualquier ayuda sería muy apreciada

Answer 1

Aparece hay algo de relleno en la: estado activo. Agregué 'relleno: 0;' a las declaraciones css iniciales (para que se herede independientemente del estado) y solucionó el problema.

Por favor, consulte este jsfiddle.

No sé por qué sucedió solo en los últimos 2 botones.

Answer 2

La solución de James Healey funciona muy bien. http://jsfiddle.net/pxx4V/ Solo quería aclarar que los tres botones tenían el mismo problema, era solo un "efecto visual" que hacía que pareciera que no. Aquí hay un violín con el problema, donde acabo de cambiar el color del texto del botón .pink: activo para #FFF http://jsfiddle.net/6L6yu/