Небольшое мертвое пространство на кнопке div в хроме

Я не могу объяснить это. У меня есть div, это кнопка. Я использую активный псевдокласс :и относительную позицию :; чтобы переместить его немного вниз и вправо при нажатии, чтобы дать ему анимацию. По какой-то причине на этой кнопке в Chrome есть небольшое мертвое пространство примерно на полпути между текстом и краем кнопки. Класс psuedo по-прежнему срабатывает, а Javascript на кнопке — нет. Если я удалю относительную позицию, проблема исчезнет. Это также происходит в Firefox, но мертвое пространство в Firefox находится на самом краю, где кнопка смещается в сторону, что имеет смысл, но также требует исправления.

Я создал JSFiddle, чтобы показать проблему :http://jsfiddle.net/dillydadally/CUHA7/6/

. Любая идея, почему это происходит? Есть ли способ это исправить?