Is it a valid markup to put some tags inside <button> tag?

Question

Here is my code:

<button class="btn_add_your_qora" type="submit">
    <div class="add_your_qora ">
        <a>send</a>
    </div>
</button>

Both the JS (on click) and the CSS (hover of that inner div) works well on Chrome. But neither JS nor CSS (hover) doesn't work on FireFox. Is it the markup valid? If yes, What's the problem?

Answer 1

That is not valid HTML. Buttons' context are Phrasing Content so they should only contain text nodes, or content that marks up the text node. Also they can't have interactive content as descendants, so you can't have an <a> tag inside it, either.

Instead you should style your button with the style of the div and make the action of the button the same of the <a> tag, or better yet, just style <a> tag like the button + the div.

For more information about <button> check this.