Como colocar um link em um botão com bootstrap?

90

Como alguém colocaria um link em um botão com bootstrap?

existem 4 métodos na documentação 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">

O primeiro não funciona para mim, nenhum botão mostra, apenas o texto com o link, sinta que é o tema que estou usando.

O segundo mostra o botão que eu quero, mas qual é o código que faz o botão vincular a outra página quando clicado?

Felicidades

— Philayyy
fonte

2

jsfiddle.net/Lstcymqo o problema pode ser com o tema que você está usando

— linktoahref

Quais são as diferenças entre botões e links?

— Macaco herege de

66

Você pode chamar uma função no evento de clique do botão.

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

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

OU Use este código

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

— developersaumya
fonte

20

Uma resposta bastante mal aceita: como seus links são analisados por rastreadores da web? Sem título, sem alvo, isso não é um link, isso é um redirecionamento ...

— abraços,

8

Isso é totalmente desnecessário e muito ruim para o SEO. Dê uma olhada na minha solução abaixo ( stackoverflow.com/a/44130105/1202214 ).

— Andreas Bergström

1

Boa resposta para mim.

— Mo1 de

134

Se você realmente não precisa do elemento de botão, basta mover as classes para um link 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 outro lado, você também pode alterar um botão para parecer um link:

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

— Domenic D.
fonte

11

uma resposta muito melhor do que a aceita - sem necessidade de javascript .. obrigado

— Balaji Krishnan

3

Esteja ciente semanticamente e para acessibilidade quando você deve usar um botão e quando você deve usar um link. Geralmente, botão para ações na página e links para conteúdo na página ou para navegar para fora da página.

— James Westgate,

A segunda opção é a melhor;)

— Pathros

128

A solução mais fácil é o primeiro de seus exemplos:

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

O motivo pelo qual ele não está funcionando para você é provavelmente, como você diz, um problema no tema que está usando. Não há razão para recorrer a marcação extra inchada ou Javascript embutido para isso.

— Andreas Bergström
fonte

6

Este é o mais fácil para todos.

— Nana Partykar

2

One-liners são os melhores;)

— Ivan

11

Outro truque para fazer a cor do link funcionar corretamente dentro da <button>marcação

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

Lembre-se de que em bs4 beta, por exemplo, btn-primary-outlinemudou parabtn-outline-primary

— Silvan
fonte

btn-outline-primarye btn-outline-primarysão as mesmas coisas. Existe um erro de digitação?

— ismailarilik

Isso funcionou para mim, pois o estilo da âncora estava sendo substituído por itens temáticos do jquery ui

— Avagut de

Truque legal herdando a cor

— Sean McCarthy

9

É assim que eu resolvi

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

— ecg
fonte

3

Combinando as respostas acima, encontro uma solução simples que provavelmente irá ajudá-lo também:

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

apenas adicionando código JS embutido, você pode transformar um botão em um link e manter seu design.

— HA
fonte

2

Você pode simplesmente adicionar o código a seguir;

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

— Ish
fonte