Bugg i sliding doors, mellanrum

Tjena,

Jag testar sliding doors lite på en <input> knapp. Och jag lyckas inte få bort ett mellanrum som blir mellan bilderna i knappen. Kan någon hjälpa mig? Jag har även bifogat en bild på själva knappen.

Koden för CSS:

button {
  border: 0;
  cursor: pointer;
  font-weight: bold;
  padding: 0px 20px 0px 0px;
  text-align: center;
}
button span {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 0px 0px 0px 20px;
}

button.submitBtn {
  background: url('../images/buttons/button_right2.png') right no-repeat;
  font-size: 10px;
  text-transform: uppercase;
}
button.submitBtn span {
  height: 33px;
  line-height: 33px;
  background: url('../images/buttons/button_left2.png') left no-repeat;
  color: #000000;  /* Textens färg */
}
button.submitBtn:hover {
	background: url('../images/buttons/button_right2.png') right no-repeat;
}
button.submitBtn:hover span {
	background: url('../images/buttons/button_left2.png') left no-repeat;
	text-decoration: underline;
}

Koden för HTML:

	<button value="submit" class="submitBtn"><span>Submit</span></button>