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

92

hay 4 métodos en la documentación de bootstrap:

<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 funciona para mí, 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 se vincule a otra página cuando se hace clic?

Salud

— Filayyy
fuente

2

jsfiddle.net/Lstcymqo el problema puede estar en el tema que está utilizando

— linktoahref

¿Cuáles son las diferencias entre botones y enlaces?

— Heretic Monkey

68

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>

— desarrolladores aumya
fuente

22

Una respuesta bastante mal aceptada: ¿cómo analizan los rastreadores web sus enlaces? Sin título, hay un objetivo, que no es un enlace, que es un cambio de dirección ...

— hugsbrugs

8

Esto es totalmente innecesario y realmente malo para el SEO. Eche un vistazo a mi solución a continuación ( stackoverflow.com/a/44130105/1202214 ).

— Andreas Bergström

1

Buena respuesta para mi.

— Mo1

135

Si realmente no necesita el elemento de 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>

— Domenic D.
fuente

11

una respuesta mucho mejor que la aceptada - no hay necesidad de javascript .. gracias

— Balaji Krishnan

3

Tenga en cuenta semánticamente y para la accesibilidad cuándo debe usar un botón y cuándo debe usar un enlace. Generalmente, botón para acciones en la página y enlaces para contenido en la página o para navegar fuera de la página.

— James Westgate

La segunda opción es la mejor;)

— Pathros

132

La solución más sencilla 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 para usted es probablemente, como usted dice, un problema en el tema que está utilizando. No hay razón para recurrir a un marcado adicional inflado o Javascript en línea para esto.

— Andreas Bergström
fuente

6

Este es el más fácil para todos.

— Nana Partykar

2

Las frases ingeniosas son las mejores;)

— Ivan

12

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

<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-outlinecambió abtn-outline-primary

— selvático
fuente

btn-outline-primaryy btn-outline-primaryson las mismas cosas. ¿Hay un error tipográfico?

— ismailarilik

Esto funcionó para mí ya que el estilo de anclaje estaba siendo

— anulado por los

9

Así es como resolví

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

— ecg
fuente

3

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>

Con solo agregar código JS en línea, puede transformar un botón en un enlace y mantener su diseño.

— DECIR AH
fuente

2

Simplemente puede agregar el siguiente código;

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

— Ish
fuente