Criar link no botão HTML
-
Use as tags
<a>e<button>para criar um botão que atua como um link em HTML -
Use o atributo
onclickna tagbuttonpara criar um botão que atua como um link em HTML -
Use as tags
<a>e<input>para criar um botão que atua como um link em HTML - Use um formulário HTML para criar um botão que atua como um link em HTML
Ilustraremos métodos para criar um botão HTML que atua como um link.
Use as tags <a> e <button> para criar um botão que atua como um link em HTML
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>
Use o atributo onclick na tag button para criar um botão que atua como um link em HTML
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>
Use as tags <a> e <input> para criar um botão que atua como um link em HTML
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>
Use um formulário HTML para criar um botão que atua como um link em HTML
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 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