Problema al agregarle un borde a unos botons

[Ciel]

Hola a todos, resulta que toy de a poco armando una pagina y testeando (especialmente efectos con jQuery) y me surgio un problema, que es el siguiente:

Yo tengo la siguiente pagina: http://www.nv-arg.com.ar/ventas/test.html

Al ponerle bordes (redondeados, aunque pasa lo mismo con un borde comun) sucede esto: http://www.nv-arg.com.ar/ventas/test2.html

Como veran el efecto hover se buguea, y aparte de eso al ponerle el borde se mueven un poco mas arriba los botones (abran las 2 paginas y vayan cambiandolas y se van a dar cuenta).

En fin, alguien sabe por que motivo pasa esto? Gracias de antemano.

PD: De mas esta decir que se fijen en el codigo fuente... bah, me parece mas comodo que postear aca los 2 codigos que son un poco largos... de todas formas cualquier cosa me piden lo que necesiten.

[lvfp]

El test 2 los problemas que tenía era que el hover salía 30px más abajo, pero eso lo arreglé quitando

.buttons span {
margin-top: 30px;
}

No veo más problemas... bueno, sí que los botones de las redes sociales como reduzcas las dimensiones de la ventana siguen colocados en la misma posición respecto al margen inferiror y se superponen al contenido.

[Ciel]

Ah gracias con eso del hover... ahora lo veo, el tema es que ese no es el unico problema con esos 3 botones... fijate que al agregarle el border (test2) los 3 botones se van unos pixeles mas arriba (aparte del tema del hover)... sabes que puede ser eso?

Respecto a los botones de las redes sociales si, tenes razon en eso... de paso alguien sabe como arreglarlo? si no me equivoco tiene que ver con el atributo "position" que tiene.

[lvfp]

No veo ese desplazamiento de 3 pixeles, sólo veo que no le has dado la propiedad border-radius a la imagen hover y quedan las esquinas.. nada más.

Para los botones de redes sociales quitale "position:absolute" a #footer.

S2