html - poner - enlaces con botones

¿Cómo poner un enlace en un botón con bootstrap?

Question

¿Cómo se puede poner un enlace en un botón con bootstrap?

Hay 4 métodos en la documentación de arranque:

<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">

El primero no me funciona, no se muestra ningún botón, solo el texto con el enlace, tengo la sensación de que es el tema que estoy usando.

El segundo muestra el botón que es lo que quiero, pero ¿cuál es el código que hace que el botón enlace a otra página cuando se hace clic?

Aclamaciones

Answer 1

Así es como lo resolví

   <a href="#" >
      <button type="button" class="btn btn-info">Button Text</button>
   </a>  

Answer 2

Combinando las respuestas anteriores, encuentro una solución simple que probablemente también te ayudará:

<button type="submit" onclick="location.href = ''your_link'';">Login</button>

simplemente agregando código JS en línea puede transformar un botón en un enlace y mantener su diseño.

Answer 3

La solución más fácil es el primero de sus ejemplos:

<a href="#link" class="btn btn-info" role="button">Link Button</a>

La razón por la que no funciona es muy probable, como usted dice, un problema en el tema que está utilizando. No hay ninguna razón para recurrir a un marcado adicional hinchado o Javascript en línea para esto.

Answer 4

Otro truco para que el color del enlace funcione correctamente dentro del marcado <button>

<button type="button" class="btn btn-outline-success and-all-other-classes"> 
  <a href="#" style="color:inherit"> Button text with correct colors </a>
</button>

Tenga en cuenta que en bs4 beta, por ejemplo, btn-primary-outline cambió a btn-outline-primary

Answer 5

Puede llamar a una función al hacer clic en el evento del botón.

<input type="button" class="btn btn-info" value="Input Button" onclick=" relocate_home()">

<script>
function relocate_home()
{
     location.href = "www.yoursite.com";
} 
</script>

O use este código

<a href="#link" class="btn btn-info" role="button">Link Button</a>

Answer 6

Si realmente no necesita el elemento del botón, simplemente mueva las clases a un enlace normal:

<div class="btn-group">
    <a href="/save/1" class="btn btn-primary active">
        <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i> Save
    </a>
    <a href="/cancel/1" class="btn btn-default">Cancel</a>
</div>

Por el contrario, también puede cambiar un botón para que aparezca como un enlace:

<button type="button" class="btn btn-link">Link</button>

Answer 7

Simplemente puede agregar el siguiente código;

<a class="btn btn-primary" href="http://localhost:8080/Home" role="button">Home Page</a>