Crear enlace en el botón HTML

Sushant Poudel 19 febrero 2023
  1. Utilice las etiquetas <a> y <button> para crear un botón que actúe como un enlace en HTML
  2. Utilice el atributo onclick en la etiqueta button para crear un botón que actúe como un enlace en HTML
  3. Utilice las etiquetas <a> y <input> para crear un botón que actúe como un enlace en HTML
  4. Use un formulario HTML para crear un botón que actúe como un enlace en HTML
Crear enlace en el botón HTML

Ilustraremos métodos para crear un botón HTML que actúa como enlace.

Utilice las etiquetas <a> y <button> para crear un botón que actúe como un enlace en HTML

Podemos crear un botón HTML usando la etiqueta <button>. La etiqueta <button> define un botón en el que se puede hacer clic. Usamos la etiqueta de anclaje <a> para crear un hipervínculo. Vincula una página a otra. Podemos crear un botón que actúe como enlace anidando la etiqueta <button> dentro de la etiqueta de anclaje. Podemos especificar la dirección del enlace a través del atributo href.

Por ejemplo, cree un elemento de anclaje dentro del cuerpo HTML. Dentro del elemento de ancla, escriba el atributo href y especifique la URL https://www.youtube.com. Después de eso, cree el botón usando la etiqueta <button>. Dentro de la etiqueta <button>, escriba el texto Youtube. Ahora, cierre la etiqueta del botón seguida de la etiqueta de anclaje.

El siguiente ejemplo muestra el proceso de creación de un botón HTML que actúa como enlace. Creará un botón que redirigirá a Youtube.

Código de ejemplo:

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

Utilice el atributo onclick en la etiqueta button para crear un botón que actúe como un enlace en HTML

También podemos usar el atributo onclick dentro de la etiqueta del botón para crear un botón que actúe como un enlace en HTML. Este atributo se dispara con un clic del mouse sobre el elemento. La secuencia de comandos se ejecuta cuando se hace clic con el mouse. Sin embargo, en este proceso, primero creamos el botón y luego solo agregamos la URL deseada. También usaremos un poco de JavaScript en este método. Usaremos el objeto window.location para obtener la dirección de la página actual y redirigirla a una nueva página.

Por ejemplo, dentro del cuerpo HTML, cree una etiqueta <button> al principio. Dentro de la etiqueta del botón, utilice el atributo onclick y establézcalo en window.location.href. A continuación, especifique la URL de destino https://www.facebook.com/ con window.location.href. Luego, escriba el texto Facebook entre la etiqueta <button>.

Hemos utilizado el atributo onclick que es parte del atributo de evento en HTML. De esta forma, podemos crear un botón HTML que actúa como enlace.

Código de ejemplo:

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

Utilice las etiquetas <a> y <input> para crear un botón que actúe como un enlace en HTML

Podemos usar la etiqueta <input> para crear un botón HTML. La etiqueta <input> también es un elemento de etiqueta <form>. Especifica un campo de entrada donde el usuario puede ingresar datos. Podemos crear un botón utilizando el atributo type y especificándolo con el valor button. Podemos utilizar el atributo value para escribir el contenido del botón. Luego, podemos usar la etiqueta de anclaje para envolver la etiqueta <input>. Luego, se forma un botón que actúa como enlace.

Por ejemplo, escriba una etiqueta de anclaje y especifique la URL de destino dentro de ella a través del atributo href. Escriba la URL como https://www.facebook.com/. Luego, escriba la etiqueta <input> y especifique su atributo type como button. Luego, especifique el texto Facebook en el atributo value. Cierre la etiqueta de anclaje.

El siguiente ejemplo crea un botón con el nombre Facebook en él. Redirige a Facebook cuando se hace clic. Así, podemos crear un botón que actúe como enlace.

Código de ejemplo:

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

Use un formulario HTML para crear un botón que actúe como un enlace en HTML

En este método, usaremos la etiqueta <form> para crear un botón que actúe como enlace. Usamos el atributo de acción para especificar la URL de destino. El atributo method indica cómo enviar los datos del formulario. El formulario se envía a la página especificada en el atributo action. Podemos configurar el botón type en submit a medida que envía los datos del formulario.

Por ejemplo, dentro del cuerpo HTML, cree la etiqueta <form> y use get para el atributo method. Ahora, especifique su URL deseada dentro del atributo action. Luego, cree el botón usando el elemento <button> y establezca el atributo type en submit. Luego, especifique el texto que desea en su botón. Luego, cierre la etiqueta <button> seguida de la etiqueta <form>. Luego, cierre todas las etiquetas restantes abiertas arriba.

Código de ejemplo:

<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

Artículo relacionado - HTML Button