¿A que se debe que cuando ponemos el cursor sobre el boton para el estado hover, parece como que si los botones se movieran un poco?

Eso también me pasó. Tuve que ponerle un borde de 1px transparente y luego le agrego el color en el "hover"

concuerdo con @jose.a.mota11 y @anperz, esto sucede cuando no se define el borde en el paso anterior al hover, y cuando agregamos el hover y el efecto sobre el botón, este aumenta en 1 px el tamaño del botón y da la sensación de que se desplaza pero en realidad está aumentando de tamaño.

La razón es porque el botón no tiene un borde predeterminado, entonces cuando hacemos

main .main-buttons button {
    border: 1px solid transparent;
} 

Yo lo solucione usando este codigo

main .main-buttons button {
    border: 1px solid white;
}

main .main-buttons button:hover {
    border: 1px solid #dadce0;
}

De esa forma el borde no desaparece cuando no se hace :hover sino que esta en blanco.

Hola yo lo arregle de esta forma, agregando un border del mismo color del fondo:

ain .main-buttons button {
  height: 36px;
  background-color: #f2f2f2;
  /* border: 0; */
  border: 1px solid #f2f2f2; (con esto se arregla el desplazamiento del pixel )
  font-size: 14px;
  color: #5f6368;
  border-radius: 5px;
  padding: 0 15px;
  margin-right: 15px;
}

Esto es porque al agregar una sombra con box shadow, da el efecto de que el botón se ''levanta'' al pasar el cursor sobre él.

El efecto de borde, tiene un box shadow que debes poner en cero en hover, e igualkar el borde en normal y en hover, porque si pareciera que se mueve, me paso a mi también, saludos :)

Hola,

Posiblemente necesites agregar un

Saludos