Criar link no botão HTML

Sushant Poudel 19 fevereiro 2023
  1. Use as tags <a> e <button> para criar um botão que atua como um link em HTML
  2. Use o atributo onclick na tag button para criar um botão que atua como um link em HTML
  3. Use as tags <a> e <input> para criar um botão que atua como um link em HTML
  4. Use um formulário HTML para criar um botão que atua como um link em HTML
Criar link no botão HTML

Ilustraremos métodos para criar um botão HTML que atua como um link.

Podemos criar um botão HTML usando a tag <button>. A tag <button> define um botão clicável. Usamos a tag âncora <a> para criar um hiperlink. Ele vincula uma página a outra página. Podemos criar um botão que atua como um link aninhando a tag <button> dentro da tag âncora. Podemos especificar o endereço do link através do atributo href.

Por exemplo, crie um elemento âncora dentro do corpo do HTML. Dentro do elemento âncora, escreva o atributo href e especifique o URL https://www.youtube.com. Depois disso, crie o botão usando a tag <button>. Dentro da tag <button>, escreva o texto Youtube. Agora, feche a tag do botão seguida pela tag âncora.

O exemplo abaixo mostra o processo de criação de um botão HTML que atua como um link. Isso criará um botão que redirecionará para o Youtube.

Código de exemplo:

<a href="https://www.youtube.com">
<button>Youtube</button>
</a> 

Também podemos usar o atributo onclick dentro da tag do botão para criar um botão que atua como um link em HTML. Este atributo é disparado com um clique do mouse no elemento. O script é executado quando o mouse é clicado. No entanto, neste processo, primeiro criamos o botão e, em seguida, adicionamos apenas o URL desejado. Também usaremos um pouco de JavaScript neste método. Usaremos o objeto window.location para obter o endereço da página atual e redirecioná-lo para uma nova página.

Por exemplo, dentro do corpo do HTML, crie uma tag <button> primeiro. Dentro da tag do botão, use o atributo onclick e defina-o como window.location.href. Em seguida, especifique o URL de destino https://www.facebook.com/ com window.location.href. Em seguida, escreva o texto Facebook entre a tag <button>.

Usamos o atributo onclick, que faz parte do atributo do evento em HTML. Desta forma, podemos criar um botão HTML que atua como um link.

Código de exemplo:

<button onclick="window.location.href='https://www.facebook.com/'">Facebook</button>

Podemos usar a tag <input> para criar um botão HTML. A tag <input> também é um elemento de tag <form>. Ele especifica um campo de entrada onde o usuário pode inserir dados. Podemos criar um botão usando o atributo type e especificando-o com o valor button. Podemos usar o atributo value para escrever o conteúdo do botão. Então, podemos usar a tag âncora para envolver a tag <input>. Em seguida, um botão que atua como um link é formado.

Por exemplo, escreva uma tag âncora e especifique o URL de destino dentro dela por meio do atributo href. Escreva o URL como https://www.facebook.com/. Em seguida, escreva a tag <input> e especifique seu atributo type como button. Em seguida, especifique o texto Facebook no atributo value. Feche a tag âncora.

O exemplo abaixo cria um botão com o nome Facebook nele. Ele redireciona para o Facebook quando clicado. Assim, podemos criar um botão que atua como um link.

Código de exemplo:

<a href="https://www.facebook.com/">
<input type="button" value="Facebook">
</a>

Neste método, usaremos a tag <form> para criar um botão que atua como um link. Usamos o atributo action para especificar o URL de destino. O atributo method instrui como enviar os dados do formulário. O formulário é entregue na página especificada no atributo action. Podemos definir o botão type como submit à medida que envia os dados do formulário.

Por exemplo, dentro do corpo do HTML, crie a tag <form> e use get para o atributo method. Agora, especifique o URL desejado dentro do atributo action. Em seguida, crie o botão usando o elemento <button> e defina o atributo type como submit. Em seguida, especifique o texto que deseja em seu botão. Em seguida, feche a tag <button> seguida pela tag <form>. Em seguida, feche todas as tags restantes abertas acima.

Código de exemplo:

<form method="get" action="https://www.youtube.com/">
<button type="submit">Continue</button>
</form>
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn

Artigo relacionado - HTML Button