Posso aninhar um elemento <button> dentro de um <a> usando HTML5?

Eu estou fazendo o seguinte:

 <a href="www.stackoverflow.com">
   <button disabled="disabled" >ABC</button>
 </a>  

Isso funciona bem, mas recebo um erro de validação HTML5 que diz que "O elemento 'botão' não deve ser aninhado no elemento 'um botão'.

Alguém pode me dar conselhos sobre o que devo fazer?

Não , ele não é HTML5 válido, de acordo com o documento de especificação HTML5 do W3C :

Modelo de conteúdo: transparente , mas não deve haver descendente de conteúdo interativo .

O elemento a pode ser agrupado em parágrafos, listas, tabelas e assim por diante, até seções inteiras, desde que não exista conteúdo interativo (por exemplo, botões ou outros links).

Em outras palavras, você pode aninhar qualquer elemento dentro de um, <a>exceto o seguinte:

• <a>

• <audio>(se o atributo de controles estiver presente)

• <button>

• <details>

• <embed>

• <iframe>

• <img>(se o atributo usemap estiver presente)

• <input>(se o atributo type não estiver no estado oculto )

• <keygen>

• <label>

• <menu>(se o atributo type estiver no estado da barra de ferramentas )

• <object>(se o atributo usemap estiver presente)

• <select>

• <textarea>

• <video>(se o atributo de controles estiver presente)

Se você estiver tentando ter um botão vinculado a algum lugar, envolva esse botão dentro de uma <form>tag como:

<form style="display: inline" action="http://example.com/" method="get">
  <button>Visit Website</button>
</form>

No entanto, se sua <button>tag é estilizada usando CSS e não se parece com o widget do sistema ... Faça um favor a si mesmo, crie uma nova classe para sua <a>tag e estilize-a da mesma maneira.

Se você estiver usando o Bootstrap 3 , isso funciona muito bem

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Não.

A solução a seguir depende do JavaScript.

<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>

Se o botão deve ser colocado dentro de um já existente <form>com method="post", em seguida, garantir o botão tem o atributo type="button"de outra forma o botão apresentará a operação POST. Dessa forma, você pode ter um <form>que contenha uma mistura de botões de operação GET e POST.

Acabei de pular para o mesmo problema e resolvi substituindo a tag 'button' por 'span'. No meu caso, estou usando o bootstrap. É assim que parece:

<a href="#register"> 
    <span class="btn btn-default btn-lg">
        Subscribe
    </span>
</a> 

Seria muito estranho se isso fosse válido e eu esperaria que fosse inválido. O que significa ter um elemento clicável dentro de outro elemento clicável? Qual é - um botão ou um link?

Outra opção é usar o atributo onclick do botão:

<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>

Isso funciona, no entanto, o usuário não verá o link exibido em foco, como faria se estivesse dentro do elemento.

Atualmente, mesmo que a especificação não permita, "parece" ainda funcionar para incorporar o botão em uma <a href...><button ...></a>tag, FWIW ...

Você pode adicionar uma classe ao botão e colocar algum script para redirecioná-lo.

Eu faço assim:

<button class='buttonClass'>button name</button>

<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>

por que não ... você também pode incorporar a imagem no botão

<FORM method = "POST" action = "https://stackoverflow.com"> 
    <button type="submit" name="Submit">
        <img src="img/Att_hack.png" alt="Text">
    </button>
</FORM> 

Explicação e solução de trabalho aqui: How to: div com onclick dentro de outra div com onclick javascript

executando este script em seu manipulador de cliques interno:

 if (!e) var e = window.event;
 e.cancelBubble = true;
 if (e.stopPropagation) e.stopPropagation();

É ilegal no HTML5 incorporar um elemento de botão dentro de um link.

Melhor usar CSS no padrão e: estados ativo (pressionado):

body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}

<p><a class="Button" href="www.stackoverflow.com">Click me<a>

Eu tento suas soluções javascript, mas, para o trabalho, preciso inserir a e.preventDefault();função javascript na minha.

<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
  <button onclick="my_trick_function('my_secondary_link.php')">
</a>


<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
    $('#id_primary_link').click(function(e) {
        e.preventDefault();
        window.location.replace(secondary_link);
    });
}   
</script>   

Use o atributo de formação dentro do botão

PS! Funciona apenas se o seu botão digitar = "enviar"

<button type="submit" formaction="www.youraddress.com">Submit</button>