Есть span
с текстом внутри button
и при нажатии на span
, его background становится цвета текста, как бы образуя инородный прямоугольник посреди кнопки.
Нажимая в другое место кнопки, не на span
, все работает как надо.
В чем причина такого поведения span?
.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;
}
.form__button__section__button__social:last-child {
background: #3B5998;
}
.form__button__section__button__social__vk {
background-image: url("vk_logo.png");
background-repeat: no-repeat;
background-size: 40px 40px;
background-position: 106px center;
background-attachment: scroll;
width: 420px;
height: 48px;
border-radius: 2px;
border: none;
outline: none;
margin-bottom: 16px;
background-color: #597DA3;
}
.form__button__section__button__social__vk:hover,
:active {
background-image: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #597DA3;
}
.form__button__section__button__social__vk:focus {
background-color: #597DA3;
border: 1px solid rgba(40, 40, 40, 0.2);
box-sizing: border-box;
}
.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;
}
.buttonInside {
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
margin-right: -33px;
}
.buttonInside2 {
font-weight: 500;
font-size: 14px;
line-height: 20px;
text-align: center;
letter-spacing: 0.02em;
color: #FFFFFF;
margin-right: -20px;
}
<section class="form__buttonSocial">
<p class="form__textSocial">или с помощью</p>
<button class="form__button__section__button__social__vk">
<span class="buttonInside">Войти через ВКонтакте</span>
</button>
<button class="form__button__section__button__social__facebook">
<span class="buttonInside2">Войти через Facebook</span>
</button>
</section>