Como fazer o botão parecer um link?


287

Preciso fazer um botão parecer um link usando CSS. As alterações são feitas, mas quando clico nele, é exibido como se fosse pressionado como em um botão. Alguma idéia de como remover isso, para que o botão funcione como um link mesmo quando clicado?


4
eventos onclick em links são tão simples como em botões
knittl

2
@knittl, @cletus Na verdade, links e botões têm significados muito diferentes em HTML. Você deve ler o whatwg.org/specs/web-apps/current-work/multipage/… . Pode não ser uma boa ideia estilizar o botão para se parecer com um link, mas depende do design da interface do usuário, enquanto o uso do link é contra as especificações HTML.
Anton Strogonoff 27/03

5
Existem algumas razões pelas quais pode ser necessário estilizar um botão como um link. (1) o botão possui o tipo = "enviar" (2) o botão possui um estilo sofisticado, ou seja, imagem de fundo com comprimento variável
TJ.

95
Também pode ser mais semanticamente correto que algo seja um botão, mesmo que você queira que ele pareça um link. Por exemplo, imagine um par de links "Expandir tudo | Recolher tudo" que mudam alguma coisa na página. Clicar nelas causa uma ação, mas não leva o usuário a lugar nenhum - a semântica é a de um botão. No entanto, o designer pode ter links especificados por motivos de aparência. Portanto, esta é realmente uma pergunta muito boa.
Shacker 15/05

17
Estou usando um botão em vez de um link porque, ao acionar métodos JS com um link, sou forçado a vincular e #depois usá-lo event.preventDefault(). Isso é desagradável, como está vinculando javascript:void(0);.
Archonic

Respostas:


351

button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
}
<button> your button that looks like a link</button>


24
Minha variação muito pequena no violino - mudou a regra de decoração do texto: sublinhar para atuar no botão: passar o mouse. veja no meu violino bifurcado .
odedbd

10
Se você não deseja que todos os botões sejam estilizados como links, escolha o estilo com algo como button.link {...styles...}isso <button class="link">Your button</button>. Isso também evita o uso, o !importantque é sempre uma boa ideia.
Archonic

3
Lembre-se de cuidar outline. Alguns navegadores adicionam os botões. Você pode definir outline-color: transparent.
SiliconMind 28/02

4
Por favor, não remova o contorno como que faria com o botão inacessível: outlinenone.com
Dominik

4
Em vez de border-bottomusar text-decoration:underline.
ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

86

O código da resposta aceita funciona na maioria dos casos, mas para obter um botão que realmente se comporta como um link, você precisa de um pouco mais de código. É especialmente difícil obter o estilo dos botões focados diretamente no Firefox (Mozilla).

O CSS a seguir garante que âncoras e botões tenham as mesmas propriedades de CSS e se comportem da mesma maneira em todos os navegadores comuns:

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238); 
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}

/* Mozilla uses a pseudo-element to show focus on buttons, */
/* but anchors are highlighted via the focus pseudo-class. */

@supports (-moz-appearance:none) { /* Mozilla-only */
  button::-moz-focus-inner { /* reset any predefined properties */ 
    border: none;
    padding: 0;
  }
  button:focus { /* add outline to focus pseudo-class */
    outline-style: dotted;
    outline-width: 1px;
  }
}

O exemplo acima modifica apenas buttonelementos para melhorar a legibilidade, mas pode ser facilmente estendido para modificação input[type="button"], input[type="submit"]e input[type="reset"]elementos também. Você também pode usar uma classe, se quiser que apenas alguns botões pareçam âncoras.

Veja este JSFiddle para uma demonstração ao vivo.

Observe também que isso aplica o estilo de âncora padrão aos botões (por exemplo, cor do texto azul). Portanto, se você quiser alterar a cor do texto ou qualquer outra coisa de âncoras e botões, faça isso após o CSS acima.


O código original (veja o snippet) nesta resposta era completamente diferente e incompleto.


Por que você precisa outline-offset: 0;se o contorno estiver definido como nenhum?
Mohamad

Eu tive que adicionar box-shadow: nonepara limpar todos os estilos no botão
Tobbe

Outro:text-transform: none;
Shone Tow

75

Se você não se importa em usar o twitter bootstrap , sugiro que você simplesmente use a classe link .

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<button type="button" class="btn btn-link">Link</button>

Espero que isso ajude alguém :) Tenha um bom dia!


7
Isso funcionou muito bem, mas deixou algum preenchimento em oposição a um link <a> real. Basta adicionar um estilo de preenchimento: 0! Importante e é dourado. Obrigado!
David

Este parece desencadear uma validação de formulário com validação jquery
Paul Becker

Esta não é uma solução confiável. Além de quebrar sutilmente a centralização vertical, desativa implicitamente o estilo do texto e as alterações no tamanho da fonte.
Radon Rosborough

5

tente usar o pseudoclasse css :focus

input[type="button"], input[type="button"]:focus {
  /* your style goes here */
}

edite como para links e use eventos onclick (você não deve usar manipuladores de eventos javascript embutidos, mas por uma questão de simplicidade, os usarei aqui):

<a href="some/page.php" title="perform some js action" onclick="callFunction(this.href);return false;">watch and learn</a>

com this.href, você pode acessar o destino do link em sua função. return falseapenas impedirá que os navegadores sigam o link quando clicados.

se o javascript estiver desativado, o link funcionará como um link normal e apenas será carregado some/page.php- se você quiser que seu link esteja morto quando o js estiver desativado, usehref="#"


eu o usaria, mas não tenho muita certeza de quais alterações serão aplicadas para que o botão não seja recuado.

sim. N, mesmo depois de dar o paddina como 0 a indentação ainda permanece

4

Você não pode estilizar botões como links de maneira confiável nos navegadores. Eu tentei, mas sempre há alguns problemas estranhos de preenchimento, margem ou fonte em algum navegador. Convide para deixar o botão parecido com um botão ou use onClick e preventDefault em um link.


2
Isso era verdade quando os navegadores usavam widgets nativos. Ainda é verdade para navegadores mesmo remotamente recentes?
aij

1
É 2017 e meu FireFox ainda usa widgets nativos.
Michael Scheper

2

Você pode conseguir isso usando css simples, como mostrado no exemplo abaixo

button {
    overflow: visible;
    width: auto;
}
button.link {
    font-family: "Verdana" sans-serif;
    font-size: 1em;
    text-align: left;
    color: blue;
    background: none;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
   
    -moz-user-select: text;
 
    /* override all your button styles here if there are any others */
}
button.link span {
    text-decoration: underline;
}
button.link:hover span,
button.link:focus span {
    color: black;
}
<button type="submit" class="link"><span>Button as Link</span></button>

insira a descrição da imagem aqui

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.