CODEWITHSUNDEEP
htmlcss
danilakds
danilakds

Reputation: 83

Weird "div in button" behaviour

So i have a button and a div inside. When i press on the div inside button i see white rectangle block on whole width of a button and on a half height of a button. But when i press below or higher that div, button pressed normal Btw here it works properly:

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

Upvotes: 1

Views: 60

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6694

You can't use <div> inside a <button>. W3 HTML docs says that a <button> must contain only phrasing content. Phrasing content is defined as including <span> but not <div>.

It is also incorrect when validated: http://validator.w3.org/#validate_by_input+with_options

SOURCE: Is it semantically incorrect to put a <div> or <span> inside of a <button>?

Sidenote: You should also clean up your code. For example linear-gradient can't be used as background-color, but should be used as background-image

Upvotes: 2

Related Questions