10

¿Cómo puedo hacer un boton que me envíe a otra página que yo le especifique? Hasta ahora solo he sabido hacerlo con la etiqueta <a> y su atributo href y target. Pero no consigo hacerlo con un <button>.

1
  • 4
    Por favor deja de regresar las ediciones a la versión original, solo quitamos la información que no es necesaria (saludos y etc) y mejoramos el formato, además de mejorar la ortografía y redacción.
    – Shaz
    Commented el 4 mar. 2018 a las 23:59

5 respuestas 5

10

Puedes hacerlo así:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>

  </style>
</head>
<body>
<button onclick="location.href='https://www.facebook.com'">Llévame a otro lado</button>
</body>
</html>

No ocupas nada de la etiqueta a, pero gracias a location.href le indica la dirección a la cual quieres llegar

14
  • 1
    Me gusta tu forma de hacerlo. Con el onclick estas utilizando javascript noo?
    – Sergio AG
    Commented el 5 mar. 2018 a las 0:06
  • 1
    Osea que el onclick es algo propio del button, no hay nada de JS?
    – Sergio AG
    Commented el 5 mar. 2018 a las 0:08
  • 1
    al ser botón, es por su propia naturaleza cliqueable; a lo que voy no es que no use JS me refiero a que para lograr el punto ue planteas me valgo de una propiedad que tienen los botones en HTML
    – user75901
    Commented el 5 mar. 2018 a las 0:09
  • 1
    A eso me referia. Que el evento onclick es algo propio del boton de HTML.
    – Sergio AG
    Commented el 5 mar. 2018 a las 0:11
  • 4
    Bien la respuesta, pero muy mal los comentarios. El código onclick="location.href='...'" SI ES JS, y el atributo onclick no es una propiedad del botón, sino que lo tienen ABSOLUTAMENTE TODOS los elementos HTML. Podés vincular el comando location.href='...' literalmente a cualquier elemento HTML de tu página.
    – Niche
    Commented el 29 oct. 2018 a las 2:49
1

Prueba agregando target="_blank" a una etiqueta <a>

a{
  border-radius: 5px;
  padding: 10px 7px;
  text-decoration: none;
  color: #fff;
  background-color: #333;
  margin: 5px;
}
<a href="https://es.stackoverflow.com" target="_blank">Mi boton</a>

1
  • 1
    target _blank lo unico que hace es abrir el enlace especificado en el href en una nueva pestaña del navegador. No es la solucion que busco pero gracias!
    – Sergio AG
    Commented el 5 mar. 2018 a las 0:10
1

Lo que yo hago es lo siguiente:

<a href="destino.php"><input type="button" value="Ir"></a>

No sé si será la mejor manera, pero me funciona.

0

Aquí te dejo otra forma de hacer la redirección;

.button{
height:30px;
width:50px;
background-color:floralwhite;
border-radius:10%;
 }
<button name="redirect" class="button" onClick="redirect()">
Click
</button>


    <script type="text/javascript">
    function redirect()
    {
   
    window.location.href="https://programminghead.com/submit-button-redirect-to-another-page-in-html/";
    }
    </script>

Utilizamos una pequeña función de JavaScript para hacer la redirección de URL.

Como has visto hay diferentes formas de hacerlo, este ejemplo que te he mostrado puede ayudarte a ser más eficiente, por ejemplo, si debes cambiar la redirección eventualmente y tienes diferentes botones en tu web. Para no ir buscando en el código HTML, crea un pequeño archivo JavaScript que contenga las redirecciones, cuando las tengas que cambiar, ya lo tienes todo en un mismo documento.

-1

No se si la respuesta es algo tarde. Pero considero por tu pregunta que eres aprendiz, por lo tanto lo ideal seria un codigo como este:

<a href="**pagina a redireccionar.php**" class="subir">**Texto del Boton**</a>
1
  • 1
    si lees la pregunta, el autor sabe hacerlo con a, pero quiere hacerlo con button. Por lo tanto tu respuesta no es válida
    – Iria
    Commented el 3 feb. 2020 a las 13:25

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.