Evitar presionar el botón creando efecto presionado

Tengo un botón en un formulario;

 

Diseñó usar;

  button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner { padding: 0 !important; border: 0 none !important; } #form_newsletter_wide .button { position:relative; float: right; cursor:pointer; border: 0px; padding: 0px; margin: 0px; margin-top: -1px; z-index:100; }  

Cuando se hace clic en Firefox, nada sobre el botón cambia, en Chrome obtengo un borde resaltado alrededor del botón con el que puedo vivir, pero en IE es más un efecto presionado donde el botón casi parece moverse hacia la derecha. ¿Hay alguna forma de prevenir esto?

Es un comportamiento del navegador, una solución simple es usar una etiqueta de enlace en lugar de un botón (ya que está llamando a una función de JavaScript).

  

Si aún desea utilizar el, he encontrado que hay algunas características en cada navegador (en una depuración simple):

  • Chrome agrega contorno y relleno
  • Firefox agrega un montón de cosas con el borde del botón estándar
  • IE se equivoca con la posición del texto interno

Entonces, para solucionarlos, debe manipular los pseudo selectores para el comportamiento del botón. Y para IE, una buena solución es envolver su texto en un elemento y hacerlo en posición relativa. Al igual que:

   

Bolígrafo