¿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>
.
-
4Por 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.– ShazCommented el 4 mar. 2018 a las 23:59
5 respuestas
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
-
1Me gusta tu forma de hacerlo. Con el onclick estas utilizando javascript noo? Commented el 5 mar. 2018 a las 0:06
-
1Osea que el onclick es algo propio del button, no hay nada de JS? Commented el 5 mar. 2018 a las 0:08
-
1al 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– user75901Commented el 5 mar. 2018 a las 0:09
-
1A eso me referia. Que el evento onclick es algo propio del boton de HTML. Commented el 5 mar. 2018 a las 0:11
-
4Bien 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 comandolocation.href='...'
literalmente a cualquier elemento HTML de tu página.– NicheCommented el 29 oct. 2018 a las 2:49
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>
-
1target _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! Commented el 5 mar. 2018 a las 0:10
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.
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.
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>
-
1si lees la pregunta, el autor sabe hacerlo con a, pero quiere hacerlo con button. Por lo tanto tu respuesta no es válida– IriaCommented el 3 feb. 2020 a las 13:25