Button is changing while hovering with different font weight and border none

I was trying to make some decoration on button, my goal just to make a button without border, and the button's font become bolder.

I use simple css like this

.button {
...
font-weight: 500;
border: none;
}

.button:hover{
font-weight:600;
border: 1px solid red;
}

but I got this result:

any explanation and solution??