Странное поведение "div в кнопке"

Question

Итак, у меня внутри есть кнопка и div. Когда я нажимаю на кнопку внутри div, я вижу белый прямоугольник на всей ширине кнопки и на половине высоты кнопки. Но когда я нажимаю ниже или выше этого div, кнопка нажимается нормально, кстати, здесь она работает правильно:

.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__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-color: linear-gradient(0deg, rgba(40, 40, 40, 0.1), rgba(40, 40, 40, 0.1)), #3B5998;
}
.buttonInside2{
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin-right: -20px;
}

<button  class="form__button__section__button__social__facebook" name="facebool" ><div class="buttonInside2">Facebook</div></button>

Answer 1

Вы не можете использовать <div> внутри <button>. W3 HTML docs говорит, что <button> должен содержать только фразовое содержимое. Содержимое фраз определяется как включающее <span>, но не <div>.

Оно также неверно при проверке: http://validator.w3.org/#validate_by_input + with_options

ИСТОЧНИК: Является ли семантически некорректным помещать

или внутри

?

Примечание: вы также должны очистить свой код. Например, linear-gradient нельзя использовать как background-color, но следует использовать как background-image