Span внутри button при нажатии ведет себя странно

Question

Есть 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>

Answer 1

Напиши, помогло ли тебе мое решение?

/* .body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.tab {
    display: flex;
    width: 100%;
}

.wrapper {
    margin: 200px auto;
    max-height: 600px;
    max-width: 400px;
    border: 1px solid rgba(0, 0, 23, 0.2);
    border-radius: 12px;
    padding: 40px;
}

.title {
    font-family: sans-serif, 'Times New Roman';
    color: rgba(0, 23, 43, .8);
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
    display: inline-block;
}

.title:hover {
    border-bottom: 4px solid rgba(12, 124, 42, 0.4);
    padding-bottom: 4px;
}

form {
    display: flex;
    flex-wrap: wrap;
}

input {
    width: 100%;
    margin-bottom: 20px;
    height: 40px;
    border-radius: 20px;
    border: 2px solid rgba(0, 0, 0, .2);
}

button {
    margin-top: 40px;
    max-width: 200px;
    background: transparent;
    border: 2px solid #eee;
    border-radius: 20% 0 20% 0;
    font-size: 22px;
    padding: 14px;
}

label {
    padding: 4px;
} */

.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:focus {
  background-color: #597DA3;
  border: 1px solid rgba(40, 40, 40, 0.2);
  box-sizing: border-box;
}

.form__button__section__button__social__vk:hover,
.form__button__section__button__social__vk:active {
  background: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #597DA3;
}


.form__button__section__button__social__facebook:focus {
  background-color: #597D7A;
  border: 1px solid rgba(40, 40, 40, 0.1);
  box-sizing: border-box;
}

.form__button__section__button__social__facebook:hover,
.form__button__section__button__social__facebook:active {
  background: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}

.buttonInside, .buttonInside2 {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin-right: -33px;
}

.buttonInside2 {
  margin-right: -20px;
}

БЛОГ НА HUSL

Span внутри button при нажатии ведет себя странно

Ответы (1 шт):