Button is moving a little bit when i hover it - html

Question

I just leanred CSS and try to doing some tutorials.
I have a button with this CSS
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
I just want button just change the color, and remove the border while i hover it.
But the result is just like this:
image of the result
I've googled it, but got stuck because the result i got just another tutorial how to make my button move, not to make it doesn't move.
Sorry for my bad english. Thanks in advance!
Edit: After i try to make another button, this is because of border: none; that makes my button move slightly. Is it any other way to make border away but the button doesn't move?

Answer 1

this is happening because you are removing the border. Instead of removing it, make it the same color as the background.
.button {
border: 1px solid red;
}
.button:hover {
background: red;
border-color: red;
}
Or, if you want the border to really disappear, use transparent:
.button:hover {
background: red;
border-color: transparent;
}

Answer 2

see below code, on .btn:hover you can write your css
.btn:hover {
background-color: red;
color: #fff;
}
.btn {
padding: 9px 25px;
border-radius: 5px;
margin-left: 24px;
cursor: pointer;
display: inline-block;
background-color: #fff;
border: 1px solid red;
}
.btn:hover {
background-color: red;
color: #fff;
}
.btn-sign-up {
font-size: 14px;
border-color: rgba(238, 67, 116, 1);
}
<div class="btn">one</div>
<div class="btn">two</div>