Crear un botón HTML que actúe como un vínculo

Ultima actualización en domingo 13º mar. 2022

onClick href

Agregar la propiedad CSS básica al botón en cada método para que el botón se vea mejor.

Uso de onclick Event

  • El atributo de evento onclick funciona cuando el usuario hace clic en el botón.
  • Cuando el mouse hace clic en el botón, el botón actúa como un enlace y redirige la página a la ubicación dada.
	<!-- Agregar un enlace al botón en el evento onclick -->
<button onclick="window.location.href = 'https://example.com/';">
   Haga clic aquí
</button>
	

Uso de la etiqueta de button de <a> tag

  • Este método crea un botón dentro de la etiqueta de anclaje.
  • La etiqueta de anclaje redirige la página web a la ubicación dada.
	<!-- Botón Agregar dentro de la etiqueta de enlace -->
<a href='https://example.com/'>
  <button>
     Haga clic aquí
  </button>
</a>
	

href onClick

Agregar styles como botón a un link

  • Este método crea un enlace de etiqueta de anclaje simple y luego aplica alguna propiedad CSS para que sea como un botón.
	<!-- Crear un vínculo normal y agregar una propiedad CSS -->
<a href="https://example.com/">
   Haga clic aquí
</a>
	

Uso de form tags

  • Este método utiliza la etiqueta de formulario y la etiqueta de botón.
  • Cuando se hace clic en el botón, se llama al atributo de acción del formulario y se redirige la página web a la ubicación dada.
	<form action="https://example.com/">
    <button type="submit">
        Haga clic aquí
    </button>
</form>