Buttons looks different in Chrome with firefox / IE

I styled buttons on css as below and it looks nice in chrome but erratic in Firefox. here's the css code:

.readon span, .readon .button, input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {display: block;padding: 0 9px;height: 25px;line-height: 22px;cursor: pointer;overflow: visible;font-weight: normal;position: relative;white-space: normal;border: 1px solid rgba(225, 225, 225, 0.2); border-radius: 2px;font-size: 1em;text-transform: uppercase;transition: background-position 0.3s linear;color: white; text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.3); background-color:#558BC2;  
background-image:url(../images/overlays/dark/readon.png); font-family:tahoma;float:right;}


.readon span:hover, .readon .button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]::-webkit-file-upload-button:hover, button:hover {background-position: 0 -223px;}

this is how it displays in Chrome/IE/firefox:

There is the live site if you want to check: http://goo.gl/SnGVM

Thanks in advance