Фоновое изображение движется, пока я нажимаю кнопку

Question

У меня есть кнопка со значком, которую я сделал свойством background-image. А также у меня есть псевдоклассы focus, active на кнопке, и при нажатии кнопки добавляется граница к кнопке. И из-за границы, я думаю, мой значок перемещается на px. Как исправить?

.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

На это влияет border.

Попробуйте добавить прозрачную рамку для кнопки, как показано ниже.

.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>