Como faço para que um link html pareça um botão?

154

Estou usando o ASP.NET, alguns dos meus botões apenas redirecionam. Prefiro que sejam links comuns, mas não quero que meus usuários notem muita diferença na aparência. Eu considerei imagens agrupadas por âncoras, ou seja, tags, mas não quero abrir um editor de imagens sempre que altero o texto em um botão.

css button MatthewMartin
fonte
2
Veja a resposta que eu aceito para esta pergunta: stackoverflow.com/questions/547222/...
tvanfosson
Você pode usar um serviço como este para gerar o CSS para você depois de configurar alguns aspectos (cor, tamanho, fonte).
Basil Bourque
1
Eu responderia como fazê-lo com javascript, mas pergunta não tem "javascript" tag
ilyaigpetrov
2
@ilyaigpetrov vá em frente e poste uma resposta. Eu perguntei isso há 7 anos e parece que é um problema comum e as pessoas precisam de uma variedade de soluções.
MatthewMartin

Respostas:

213

Aplique essa classe a ela

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Expandir snippet

TStamper
fonte
12
O problema é que é necessário que você reproduza a aparência de um botão com CSS. Infelizmente, porém, os botões em navegadores diferentes e versões diferentes de navegadores parecem diferentes. Portanto, você deve aceitá-lo engraçado em alguns navegadores ou ter um monte de código para descobrir qual navegador e qual versão o usuário possui e escolher um estilo diferente. O que é um monte de problemas e pode ser interrompido na próxima vez que uma nova versão de um navegador for lançada.
Jay
Isso só funciona para mim se eu aplicá-lo à atag diretamente ( a {display: block ...}), o que não é aceitável. Você tem alguma idéia de por que o classatributo inside atag não funciona? :( Eu estou usando o Firefox 27. Eu também tentei a.button {...}e também não funciona.
just_a_girl 26/02/14
1
@ Jay pode ser um compromisso para definir o estilo dos elementos <input type="submit">e / ou <button>para que eles não usem os padrões do navegador (sempre que possível) e depois combiná-los com o estilo .buttonconforme descrito acima. Isso deve ajudar a reduzir as diferenças, se não as remover completamente, e é melhor que o seu método (não confiável - como você diz com razão) de cheirar o tipo e a versão do navegador.
Ollie Bennett
@OllieBennett True: Você pode redefinir completamente a aparência de um botão. Eu não tentei fazer isso, não sei quantos aspectos do estilo você deve substituir. Parece uma dor, mas não tendo tentado, não posso dizer quanta dor é comparada a outras opções.
21414 Jay
@CraigGjerdingen Eu realmente gosto dos estilos que você usou para .link_button. O uso do CSS3 definitivamente atualiza esta resposta. Também usando estilos que são menos como os botões de "regular" do navegador, mas ainda tem um botão affordance resolve o problema de navegador cheirar sem (imo), tendo também redefinir os estilos para<input type="submit">
Evan Donovan
128

Por que não apenas envolver uma tag de âncora em torno de um elemento de botão.

<a href="somepage.html"><button type="button">Text of Some Page</button></a>

Isso funcionará para IE9 +, Chrome, Safari, Firefox e provavelmente Opera.

guanome
fonte
8
@Dean_Wilson tentar ter para atender a ie6 :(
Robotnik
@feeel Porque era mais fácil para mim conseguir um botão com aparência consistente. Se você usar CSS, ele não terá um estilo nativo. Alguém já tinha essa resposta de qualquer maneira.
guanome
1
Eu gosto dessa solução, pois você não precisa mexer no CSS tentando imitar o estilo de botão do navegador nativo. No entanto, no Firefox eu consegui trabalhar apenas com <button type="button">. Sem o atributo type, ele sempre faria uma postagem e ignoraria o link.
Tobias
@ Pyitoechito Tenho certeza que sim, já que o Chrome e o Safari estão no webkit. Parece que vai jsfiddle.net/9Gt7y
guanome
31
O aninhamento <button> e <a> não é HTML válido e tem um comportamento indefinido. Veja a resposta detalhada aqui stackoverflow.com/questions/6393827/… Se funcionar, é apenas uma coincidência.
Odin
36

IMHO, existe uma solução melhor e mais elegante. Se o seu link for este:

<a href="http://www.example.com">Click me!!!</a>

O botão correspondente deve ser este: 

<form method="GET" action="http://www.example.com">
<input type="submit" value="Click me!!!">
</form>

Essa abordagem é mais simples porque usa elementos html simples, portanto, funcionará em todos os navegadores sem alterar nada. Além disso, se você tiver estilos para seus botões, esta solução aplicará os mesmos estilos gratuitamente ao seu novo botão.

Raul Luna
fonte
5
Ok, testei isso hoje .. e .. funciona muito bem se você não estiver usando formulários da Web do ASP.NET. Os formulários da Web do ASP.NET agrupam a página inteira em uma tag de formulário e os formulários aninhados parecem não funcionar - eles funcionam fora da tag de formulário do ASP.NET, mas isso limita o uso de links nas partes superior e inferior.
MatthewMartin
3
Simples e eficaz. Você pode adicionar estilo display: inline ao elemento do formulário. Caso contrário, é tratado como um bloco diferente do botão / âncora / entrada.
Nimrodm 30/03
Boa pergunta. Eu também não acho. Mas outras soluções descritas aqui não funcionarão com o googlebot, por exemplo, o uso de uma tag de botão.
Raul Luna
Eu tentei isso no Django, mas como o botão acaba em outro formulário, ele publica os dados em vez de atuar como um link.
21135 wobbily_col
1
você também pode fazer o botão redirecionar em javascript. mas agora não é um link - não pode "copiar endereço do link para área de transferência", botão do meio para abrir em nova aba etc, pré-visualizar o destino do link passando o mouse sobre ele com o mouse etc.
Alexander Taylor
27

A appearancepropriedade CSS3 fornece uma maneira simples de estilizar qualquer elemento (incluindo uma âncora) com os <button>estilos internos de um navegador :

a.btn {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
<body>
  <a class="btn">CSS Button</a>
</body>
Expandir snippet

Truques CSS tem um bom esboço com mais detalhes sobre isso. Lembre-se de que nenhuma versão do Internet Explorer atualmente suporta isso de acordo com caniuse.com .

Kevin Leary
fonte
5
Isso foi retirado da especificação CSS3. htmlvalidator.com/help.php?m=1&h=appearance
user1431356 8/18
22 
a {
    display: block;
    height: 20px;
    width: auto;
    border: 1px solid #000;
}

Você pode brincar com <a>tags como esta se exibir a tela em bloco. Você pode ajustar a borda para dar um efeito de tonalidade e a cor de fundo para a sensação desse botão :)

Ólafur Waage
fonte
18

Se você deseja um bom botão com cantos arredondados, use esta classe:

.link_button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #20538D;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4479BA;
    color: #FFF;
    padding: 8px 12px;
    text-decoration: none;
}
<a href="#" class="link_button">Example</a>
Expandir snippet

rupsray
fonte
3
Adicionei esta e a resposta mais alta a um jsFiddle. Sinta-se livre para mexer com jsfiddle.net/5z6ew1m0/6
Craig Gjerdingen
Você também pode adicionar um margin. Caso contrário, é um bom trabalho modelá-lo.
C00000fd 09/10/19
3

Como o TStamper disse, você pode simplesmente aplicar a classe CSS a ela e projetá-la dessa maneira. À medida que o CSS aprimora, o número de coisas que você pode fazer com os links se tornou extraordinário, e agora há grupos de design que se concentram na criação de botões CSS de aparência incrível para temas e assim por diante.

Por exemplo, você pode fazer transições com cor de plano de fundo usando a propriedade -webkit-transição e as classes pseduo. Alguns desses designs podem ficar bem nozes, mas está fornecendo uma alternativa fantástica para o que no passado poderia ter sido feito com, digamos, flash.

Por exemplo (na minha opinião, são impressionantes ), http://tympanus.net/Development/CreativeButtons/ (esta é uma série de animações totalmente prontas para uso em botões, com código-fonte na página de origem ) http://www.commentredirect.com/make-awesome-flat-buttons-css/ (na mesma linha, esses botões têm efeitos de transição agradáveis, mas minimalistas, e fazem uso do novo estilo de design "plano").

graemeboy
fonte
3

Você pode fazer isso com JavaScript:

  1. Obtenha estilos CSS de botão real com getComputedStyle(realButton).
  2. Aplique os estilos a todos os seus links.

/* javascript, after body is loaded */
'use strict';

{ // Namespace starts (to avoid polluting root namespace).
  
  const btnCssText = window.getComputedStyle(
    document.querySelector('.used-for-btn-css-class')
  ).cssText;
  document.querySelectorAll('.btn').forEach(
    (btn) => {
      
      const _d = btn.style.display; // Hidden buttons should stay hidden.
      btn.style.cssText = btnCssText;
      btn.style.display = _d;
      
    }
  );
  
} // Namespace ends.
<body>
  <h3>Button Styled Links</h3>
  <button class="used-for-btn-css-class" style="display: none"></button>
  <a href="//github.io" class="btn">first</a>
  <a href="//github.io" class="btn">second</a>
  <button>real button</button>
  <script>/* You may put JS here. */</script>
</body>
Expandir snippet

ilyaigpetrov
fonte
2

Você pode criar um botão padrão e usá-lo como imagem de fundo de um link. Depois, você pode definir o texto no link sem alterar a imagem.

As melhores soluções, se você não tiver um botão renderizado especial, são as duas já fornecidas pelo TStamper e Ólafur Waage.

cjk
fonte
2

Resposta muito tardia:

Eu tenho lutado com isso desde que comecei a trabalhar no ASP. Aqui está o melhor que eu criei:

Conceito: eu crio um controle personalizado que possui uma tag. Em seguida, no botão, coloquei um evento onclick que define document.location para o valor desejado com JavaScript.

Liguei para o controle ButtonLink, para que eu pudesse facilmente me confundir com o LinkButton.

aspx:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ButtonLink.ascx.vb" Inherits="controls_ButtonLink" %>

<asp:Button runat="server" ID="button"/>

Código por trás:

Partial Class controls_ButtonLink
Inherits System.Web.UI.UserControl

Dim _url As String
Dim _confirm As String

Public Property NavigateUrl As String
    Get
        Return _url
    End Get
    Set(value As String)
        _url = value
        BuildJs()
    End Set
End Property
Public Property confirm As String
    Get
        Return _confirm
    End Get
    Set(value As String)
        _confirm = value
        BuildJs()
    End Set
End Property
Public Property Text As String
    Get
        Return button.Text
    End Get
    Set(value As String)
        button.Text = value
    End Set
End Property
Public Property enabled As Boolean
    Get
        Return button.Enabled
    End Get
    Set(value As Boolean)
        button.Enabled = value
    End Set
End Property
Public Property CssClass As String
    Get
        Return button.CssClass
    End Get
    Set(value As String)
        button.CssClass = value
    End Set
End Property

Sub BuildJs()
    ' This is a little kludgey in that if the user gives a url and a confirm message, we'll build the onclick string twice.
    ' But it's not that big a deal.
    If String.IsNullOrEmpty(_url) Then
        button.OnClientClick = Nothing
    ElseIf String.IsNullOrEmpty(_confirm) Then
        button.OnClientClick = String.Format("document.location='{0}';return false;", ResolveClientUrl(_url))
    Else
        button.OnClientClick = String.Format("if (confirm('{0}')) {{document.location='{1}';}} return false;", _confirm, ResolveClientUrl(_url))
    End If
End Sub
End Class

Vantagens deste esquema: Parece um controle. Você escreve uma única tag para ele, <ButtonLink id = "mybutton" navigateurl = "blahblah" />

O botão resultante é um botão HTML "real" e, portanto, se parece com um botão real. Você não precisa tentar simular a aparência de um botão com CSS e, em seguida, enfrentar diferentes visões em diferentes navegadores.

Embora as habilidades sejam limitadas, você pode estendê-lo facilmente adicionando mais propriedades. É provável que a maioria das propriedades apenas precise "passar" para o botão subjacente, como eu fiz para o texto, enabled e cssclass.

Se alguém tiver uma solução mais simples, mais limpa ou melhor, ficaria feliz em ouvi-la. Isso é uma dor, mas funciona.

Jay
fonte
2

Isto é o que eu usei. O botão Link é

<div class="link-button"><a href="/">Example</a></div>

CSS

/* body is sans-serif */ 

.link-button {
    margin-top:15px;
    max-width:90px;
    background-color:#eee;
    border-color:#888888;
    color:#333;
    display:inline-block;
    vertical-align:middle;
    text-align:center;
    text-decoration:none;
    align-items:flex-start;
    cursor:default;
    -webkit-appearence: push-button;
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    font-size: 1em;
    font-family: inherit;
    border-color: #000;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    min-height: 30px;
}

.link-button a {
    margin-top:4px;
    display:inline-block;
    text-decoration:none;
    color:#333;
}

.link-button:hover {
    background-color:#888;
}

.link-button:active {
    background-color:#333;
}

.link-button:hover a, .link-button:active a {
    color:#fff;
}
Andrew Howden
fonte
Não parece muito com um botão. Não sei quem te votou mal. Aqui está o JS fiddle para o código que você forneceu: jsfiddle.net/yajj2x0p
MatthewMartin
2

Que tal usar asp: LinkButton?

Você pode fazer isso - fiz com que o botão de link parecesse um botão padrão, usando a entrada do TStamper. O sublinhado aparecia no texto quando eu pairava, apesar da text-decoration: noneconfiguração.

Consegui parar o sublinhado ao passar o mouse adicionando style="text-decoration: none"no botão link:

<asp:LinkButton 
id="btnUpdate" 
CssClass="btnStyleTStamper" 
style="text-decoration: none" 
Text="Update Items"   
Onclick="UpdateGrid"  
runat="server"
/>
cristão
fonte
O botão Link cria algo que se parece com um link, mas age como um botão. A pergunta pede o oposto: algo que se parece com um botão, mas age como um link.
Jay
2

Usando as propriedades de borda, cor e cor de fundo, você pode criar um link html parecido com um botão!

a {
background-color: white;
color: black;
padding: 5px;
text-decoration: none;
border: 1px solid black;
}
a:hover {
background-color: black;
color: white;

}
<a href="https://stackoverflow.com/

">Open StackOverflow</a>
Expandir snippet

Espero que isto ajude :]

Sree Ramana
fonte
2

Use essa classe . Isso fará com que seu link pareça o mesmo de um botão quando aplicado usando a buttonclasse em uma atag.

ou

AQUI ESTÁ OUTRA JSFIDDLE DE DEMONSTRAÇÃO

.button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    border: solid 1px #da7c0c;
    background: #478dad;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em; 
    -moz-border-radius: .5em;
    border-radius: .3em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.button:active {
    position: relative;
    top: 1px;
}
Muhammad Ashikuzzaman
fonte
1

Eu uso um asp:Button:

<asp:Button runat="server"
            OnClientClick="return location='targetPage', true;"
            UseSubmitBehavior="False"
            Text="Button Text Here"
/>

Dessa forma, a operação do botão é completamente do lado do cliente e o botão atua como um link para o targetPage.

Manus Hand
fonte
Bom trabalho, mostrando asp:Buttoncomo é a prática na prática, para ajudar outros usuários!
Usuário que não é usuário
0 

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
<a href="#" class="button">Example</a>
Expandir snippet


fonte
0

Use abaixo o snippet.

    .a{
  color: $brn-acc-clr;
  background-color: transparent;
  border-color: #888888;

  &:hover:active{
    outline: none;
    color: #888888;
    border-color: #888888;
  }
  &:fill{
    background-color: #888888;
    color: #fff;
    box-shadow: 0 3px 10px rgba(#888888, 0.5);
    &:hover:active{
      color: #fff;
    }
    &:hover:not(:disabled){
      transform: translateY(-2px);
      background-color: darken(#888888, 4);
    }
  }
}
Himadri Mandal
fonte
0

Simples botão css agora você pode brincar com seu editor

a {
  display: inline-block;
  background: #000000c9;
  color: #000;
  padding: 12px 24px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
}
a:hover {
  background:#000
  cursor: pointer;
  transition: 0.3s ease-in;
}

Tag de link

<a href="#">Hover me<a>
codeuix
fonte
-1

Isso funcionou para mim. Parece um botão e se comporta como um link. Você pode marcar por exemplo.

<a href="mypage.aspx?param1=1" style="text-decoration:none;">
    <asp:Button PostBackUrl="mypage.aspx?param1=1" Text="my button-like link" runat="server" />
</a>
Andrej Adamenko
fonte