Como criar um botão em HTML que age como um link

Artigo original: https://www.freecodecamp.org/news/how-to-create-an-html-button-that-acts-like-a-link/

Às vezes, você pode querer usar um botão para fazer um link para outra página ou site da web em vez de enviar um formulário ou algo semelhante. É algo simples de fazer e é possível fazer isso de várias maneiras.

Como criar um botão em HTML usando a tag button em uma tag a

Uma forma de fazer isso é simplesmente envolver a tag <button> com uma tag <a>:

<a href='https://www.freecodecamp.org/'><button>Link para o freeCodeCamp</button></a>

Desse modo, você transforma o botão inteiro em um link.

Como transformar um link em um botão com CSS

Uma segunda opção é criar seu link normalmente, com uma tag <a>, e estilizá-la com o CSS:

<a href='https://www.freecodecamp.org/'>Link para o freeCodeCamp</a>

Uma vez criado o link, você pode usar o CSS para fazer com que ele se pareça com um botão. Por exemplo, é possível adicionar uma borda, uma cor de fundo e estilos para quando o usuário passar o mouse sobre o link.

Você pode ler mais sobre a estilização de links com CSS aqui (em inglês).

Como colocar um botão dentro de um formulário usando HTML

Outra forma de adicionar um botão é envolver um input com tags form. Especifique o URL de destino desejado no atributo action do formulário.

<form action="http://google.com">
    <input type="submit" value="Ir para o Google" />
</form>

Espero que tenha achado este tutorial útil. Feliz programação.