Background-image moving while i press button - html

Question

I have a button with icon which I made by background-image property. And also I have focus, active pseudoclasses at button, and when button clicked it adds a border to button. And because of the border, I think, my icon moving on a px.
How can I fix it?
.form__button__section__button__social__facebook{
width: 420px;
height: 48px;
border-radius: 2px;
border:none;
outline: none;
margin-bottom: 16px;
background: #597DA3;
background-image: url("facebook_logo.png");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: 112px center;
font-family: 'RF Tone';
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
padding: 0px 0px 0px 15px;
}
.form__button__section__button__social__facebook:focus{
background-color: #3B5998;
border: 1px solid rgba(40, 40, 40, 0.1);
box-sizing: border-box;}
.form__button__section__button__social__facebook:hover,:active{
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
<button class="form__button__section__button__social__facebook" > Facebook</button>

Answer 1

It's effected by the border.
Try adding a transparent border for the button like below.
.form__button__section__button__social__facebook{
width: 420px;
height: 48px;
border-radius: 2px;
border: 1px solid transparent;
outline: none;
margin-bottom: 16px;
background: #597DA3;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAaVBMVEU6VZ////81Up0yT5xgc61+jbsvTZyXo8hFXaOirM0nSJmlrs7O1OUkRpkfQ5c1UZ1oerKHlcDp6/M9WKHHzeHV2ulxgravt9Td4Ozl6PGDkb7ByN5YbatQZ6j29/q3v9h2hrhMY6aQnMSsAnKHAAAC70lEQVR4nO3caXLiMBRFYdoihhhsQ5jDlPT+F9mdqv7bRrYQ7z7XOQug9BUWHiQzmRARERERERERERERERERqVe0IZQPCtaDHFwo62Yz/VrP3jtbrH0Sy7rYH46/YtpV1oPtX6jCbBel+2npThjq/Taa51AYmrdTH583YdHsP/r5nAnLTa/j05+w+ezv8yRsq/MQoB9hmPeegb6E5eU2DOhFWK4G+rwIw3CgD2G4Dge6ELaboXPQi7CJu4nwK6zvKUAHwvCVBHQgrFMmoQdh4jGqL2wviUB5YRP/uMKnsJ2mAtWF9XLkwjblcs2FsDqMXZh6LpQXhn06UFtYpZ7t5YX1wEczboTF/AlAaWFYP0OovPZU9pmGt9194W79sIq/Jt2uqqrytwbcxJ4NT9e6tR7soEIk8N749E2K7zjgubEe6dAi75yOboGxwrnTQ/RvRZTwIHy6e1SccF5Yj3N4UcJjbT3MhKKEh9J6mAlFCZWvyR4WJXxDqBxChPohRKgfQoT6IUSoH0KE+iFEqB9ChPqNQ1h0vKJcxWwt/aofvelsDFzNOlpECO9dH/DT+8ZUWMYgErNdfXuB8Ga7RPwCofHy2wuE59EfpQvbH9MXCNejF65st2q8QPhtu5Mhv/BmfE2TX/hhvGMqv3BpvBslv/BuvGUqv3A2+nloff+YX3gx3rmYX2j9CCC78Ga9NzO78GS9dTG7cDv679B8c2Z24e/R/9LsRy+8Wm/kzy60nobZhdb3TvmF9u8e5hYaP0p8gfB99PPQ/l2F3MKp+StDuYXWvuxC60eJ+YXm907ZhQJ/NlA+4d9ZOrrbH6WTzbyjmL+D/Oz6BNsl/H8V/y9E7TYpOz7BGveoceyn6QohQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLUDyFC/RAi1A8hQv0QItQPIUL9ECLs0R8aFUYEFLSeAgAAAABJRU5ErkJggg==");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: 112px center;
font-family: 'RF Tone';
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
padding: 0px 0px 0px 15px;
}
.form__button__section__button__social__facebook:focus{
background-color: #3B5998;
border: 1px solid rgba(40, 40, 40, 0.1);
box-sizing: border-box;}
.form__button__section__button__social__facebook:hover,:active{
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
<button class="form__button__section__button__social__facebook" > Facebook</button>